fixed ui and refactored axios into boot file

Author: briancaffey

quasar/src/boot/axios.js

@@ -1,5 +1,50 @@
 import axios from "axios";
 
-export default async ({ Vue }) => {
-  Vue.prototype.$axios = axios;
+export default async ({ Vue, store, router }) => {
+  const apiCall = axios.create({
+    baseURL: process.env.API_URL
+  });
+
+  apiCall.interceptors.request.use(
+    config => {
+      const c = config;
+      if (store.getters.isAuthenticated) {
+        c.headers.Authorization = `Bearer ${store.getters.getToken}`;
+      }
+      return c;
+    },
+    error => {
+      Promise.reject(error);
+    }
+  );
+
+  function handleSuccess(response) {
+    return { data: response.data };
+  }
+
+  function handleError(error) {
+    console.log(error);
+    switch (error.response.status) {
+      case 400:
+        break;
+      case 401:
+        // Log out user, remove token, clear state and redirect to login
+        store.dispatch("AUTH_LOGOUT").then(router.push("/"));
+        break;
+      case 404:
+        // Show 404 page
+        break;
+      case 500:
+        // Serveur Error redirect to 500
+        break;
+      default:
+        // Unknow Error
+        break;
+    }
+    return Promise.reject(error);
+  }
+
+  apiCall.interceptors.response.use(handleSuccess, handleError);
+
+  Vue.prototype.$axios = apiCall;
 };

quasar/src/components/auth/LoginForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-form @submit="login">
+  <q-form @submit.prevent="login">
     <q-input
       :color="$store.getters.isDark ? 'black' : 'primary'"
       :dark="$store.getters.isDark"

quasar/src/layouts/primary/MainHeader.vue

@@ -82,7 +82,6 @@ export default {
   },
   methods: {
     setLang(lang) {
-      console.log(lang);
       this.lang = lang;
     },
     logout() {

quasar/src/pages/Auth/Callback.vue

@@ -4,12 +4,11 @@
 
 <script>
 import * as Cookies from "js-cookie";
-import apiCall from "../../utils/api";
 export default {
   methods: {
     handleOauthCallback() {
       const provider = this.$route.params.provider;
-      apiCall
+      this.$axios
         .post(`/api/social/${provider}/`, { code: this.$route.query.code })
         .then(resp => {
           Cookies.set("refresh-token", resp.data.refresh);

quasar/src/pages/Auth/GitHub.vue

@@ -4,11 +4,10 @@
 
 <script>
 import * as Cookies from "js-cookie";
-import apiCall from "../../utils/api";
 export default {
   methods: {
     githubAuth() {
-      apiCall
+      this.$axios
         .post("/api/social/github/", { code: this.$route.query.code })
         .then(resp => {
           Cookies.set("refresh-token", resp.data.refresh);

quasar/src/pages/Auth/Google.vue

@@ -6,11 +6,10 @@
 
 <script>
 import * as Cookies from "js-cookie";
-import apiCall from "../../utils/api";
 export default {
   methods: {
     googleAuth() {
-      apiCall
+      this.$axios
         .post("/api/social/google/", {
           code: this.$route.query.code
         })

quasar/src/pages/Examples/Redis.vue

@@ -25,7 +25,6 @@
 </template>
 
 <script>
-import apiCall from "../../utils/api.js";
 export default {
   data() {
     return {
@@ -42,20 +41,20 @@ export default {
   },
   methods: {
     clearCacheValue() {
-      apiCall.delete("/api/debug/redis/").then(resp => {
+      this.$axios.delete("/api/debug/redis/").then(resp => {
         console.log(resp);
         console.log("getting here..");
         this.valueFromCache = null;
       });
     },
     getCachedValue() {
-      apiCall.get("/api/debug/redis/").then(resp => {
+      this.$axios.get("/api/debug/redis/").then(resp => {
         this.valueFromCache = resp.data["count"];
       });
     },
     setCacheValue() {
       if (this.valueToSet) {
-        apiCall
+        this.$axios
           .post("/api/debug/redis/", { count: this.valueToSet })
           .then(resp => {
             this.valueFromCache = resp.data.count;

quasar/src/store/auth/index.js

@@ -6,7 +6,8 @@ export const AUTH_ERROR = "AUTH_ERROR";
 export const AUTH_LOGOUT = "AUTH_LOGOUT";
 export const AUTH_REFRESH = "AUTH_REFRESH";
 
-import apiCall from "../../utils/api";
+// import axios from "axios";
+import Vue from "vue";
 import { Cookies } from "quasar";
 import { USER_REQUEST } from "../user";
 
@@ -26,7 +27,7 @@ const actions = {
   [AUTH_REQUEST]: ({ commit, dispatch }, user) =>
     new Promise((resolve, reject) => {
       commit(AUTH_REQUEST);
-      apiCall
+      Vue.prototype.$axios
         .post("/api/auth/obtain_token/", user)
         .then(resp => {
           Cookies.set("refresh-token", resp.data.refresh);
@@ -51,7 +52,7 @@ const actions = {
     }),
   [AUTH_REFRESH]: ({ commit, dispatch }) =>
     new Promise((resolve, reject) => {
-      apiCall
+      Vue.prototype.$axios
         .post("/api/auth/refresh_token/", {
           refresh: Cookies.get("refresh-token")
         })

quasar/src/store/ui/index.js

@@ -19,12 +19,9 @@ const mutations = {
     state.isDark = !state.isDark;
   },
   setAuthPanel: (state, payload) => {
-    console.log("change panel...");
-    console.log(payload);
     state.authPanel = payload;
   },
   toggleLoginMenu: state => {
-    console.log("firing toggleLoginMenu mutation");
     state.visible = !state.visible;
   },
   toggleLeftDrawer: (state, payload) => {
@@ -33,9 +30,6 @@ const mutations = {
       return;
     }
     state.leftDrawerOpen = !state.leftDrawerOpen;
-  },
-  setNextLink: (state, payload) => {
-    state.nextLink = payload.nextLink;
   }
 };
 

quasar/src/store/user/index.js

@@ -6,7 +6,6 @@ export const USER_ERROR = "USER_ERROR";
 
 import Vue from "vue";
 import { AUTH_LOGOUT } from "../auth";
-import apiCall from "../../utils/api";
 
 const state = {
   status: "",
@@ -20,7 +19,7 @@ const getters = {
 
 const actions = {
   [USER_REQUEST]: ({ dispatch, commit }) => {
-    apiCall
+    Vue.prototype.$axios
       .get("/api/users/profile/")
       .then(resp => {
         const profile = resp.data;