🔨 Catch 401 error of all requests

src/main.ts

@@ -12,6 +12,5 @@ const pinia = createPinia();
 pinia.use(piniaPluginPersistedstate);
 
 axios.defaults.baseURL = import.meta.env.VITE_API_BASE_URL;
-axios.defaults.headers.post["Content-Type"] = "application/json";
 
 createApp(App).use(router).use(vuetify).use(pinia).mount("#app");

src/router/index.ts

@@ -76,17 +76,9 @@ router.beforeEach((to, from) => {
   } else {
     const mutualGuildsStore = useMutualGuildsStore();
     if (store.isLoggedIn) {
-      getMutualGuilds()
-        .then((value) => {
+      getMutualGuilds().then((value) => {
         mutualGuildsStore.guilds = value;
         mutualGuildsStore.loaded = true;
-        })
-        .catch((reason) => {
-          if (reason?.response.status == 401) {
-            console.log("401, Login expired, logout...");
-            logout(true, false);
-            router.push({ name: "home" });
-          }
       });
     }
   }

src/services/audioService.ts

@@ -1,7 +1,7 @@
 import type { Status } from "@/data/music/Status";
 import { useEventQueuStore } from "@/stores/eventQueu";
 import { useUserStore } from "@/stores/user";
-import axios from "axios";
+import axios from "./axiosConfig";
 
 function getAudioStatus(guildId: string) {
   const userStore = useUserStore();
@@ -13,7 +13,6 @@ function getAudioStatus(guildId: string) {
     })
     .catch((reason) => {
       console.error(`Fail to retrive audio status !`);
-      console.log(reason);
       const eventQueuStore = useEventQueuStore();
       eventQueuStore.push({
         uuid: undefined,
@@ -39,7 +38,6 @@ function connect(guildId: string, voiceChannelId: string) {
     )
     .catch((reason) => {
       console.error(`Fail to connect to voice channel !`);
-      console.log(reason);
       const eventQueuStore = useEventQueuStore();
       eventQueuStore.push({
         uuid: undefined,
@@ -63,7 +61,7 @@ function disconnect(guildId: string) {
     )
     .catch((reason) => {
       console.error(`Fail to disconnect from voice channel !`);
-      console.log(reason);
+
       const eventQueuStore = useEventQueuStore();
       eventQueuStore.push({
         uuid: undefined,
@@ -87,7 +85,6 @@ function resume(guildId: string) {
     )
     .catch((reason) => {
       console.error(`Fail to resume playback !`);
-      console.log(reason);
       const eventQueuStore = useEventQueuStore();
       eventQueuStore.push({
         uuid: undefined,
@@ -111,7 +108,6 @@ function pause(guildId: string) {
     )
     .catch((reason) => {
       console.error(`Fail to pause playback !`);
-      console.log(reason);
       const eventQueuStore = useEventQueuStore();
       eventQueuStore.push({
         uuid: undefined,
@@ -135,7 +131,6 @@ function skip(guildId: string) {
     )
     .catch((reason) => {
       console.error(`Fail to skip playback !`);
-      console.log(reason);
       const eventQueuStore = useEventQueuStore();
       eventQueuStore.push({
         uuid: undefined,
@@ -159,7 +154,6 @@ function stop(guildId: string) {
     )
     .catch((reason) => {
       console.error(`Fail to stop playback !`);
-      console.log(reason);
       const eventQueuStore = useEventQueuStore();
       eventQueuStore.push({
         uuid: undefined,
@@ -185,7 +179,6 @@ function add(guildId: string, url: string) {
     )
     .catch((reason) => {
       console.error(`Fail to add track to playlist !`);
-      console.log(reason);
       const eventQueuStore = useEventQueuStore();
       eventQueuStore.push({
         uuid: undefined,

src/services/authService.ts

@@ -1,6 +1,6 @@
 import { useEventQueuStore } from "@/stores/eventQueu";
 import { useUserStore } from "@/stores/user";
-import axios from "axios";
+import axios from "./axiosConfig";
 import { useRouter } from "vue-router";
 
 async function login(code: string): Promise<boolean> {
@@ -33,7 +33,6 @@ async function login(code: string): Promise<boolean> {
     return true;
   } catch (reason) {
     console.log("Loggin fail !");
-    console.log(reason);
     logout(false, true);
     return false;
   }
@@ -41,6 +40,9 @@ async function login(code: string): Promise<boolean> {
 
 function logout(expired: boolean, loginFail: boolean): void {
   const userStore = useUserStore();
+  if (!userStore.isLoggedIn) {
+    return;
+  }
   userStore.token = "";
   userStore.userName = "";
   userStore.discordId = "";

src/services/axiosConfig.ts

@@ -0,0 +1,37 @@
+import router from "@/router";
+import { useUserStore } from "@/stores/user";
+import axios, { AxiosError } from "axios";
+import { logout } from "./authService";
+
+const instance = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL,
+});
+
+instance.defaults.headers.post["Content-Type"] = "application/json";
+
+instance.interceptors.request.use((config) => {
+  const userStore = useUserStore();
+  if (config.headers) {
+    config.headers.authorization = `Bearer ${userStore.token}`;
+  }
+
+  return config;
+});
+
+instance.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    const cast = error as AxiosError;
+    console.log(cast);
+    if (cast.response?.status == 401) {
+      console.log("401, Login expired, logout...");
+      logout(true, false);
+      useUserStore().originRoute = router.currentRoute.value;
+      router.push({ name: "oauth-redirect" });
+      return;
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default instance;

src/services/guildService.ts

@@ -3,7 +3,7 @@ import type { Guild } from "@/data/guild/Guild";
 import type { InviteLink } from "@/data/InviteLink";
 import { useEventQueuStore } from "@/stores/eventQueu";
 import { useUserStore } from "@/stores/user";
-import axios from "axios";
+import axios from "./axiosConfig";
 
 function getMutualGuilds(): Promise<Guild[]> {
   return new Promise((resolve, reject) => {
@@ -21,7 +21,6 @@ function getMutualGuilds(): Promise<Guild[]> {
       })
       .catch((reason) => {
         console.error(`Fail to get mutal guilds !`);
-        console.log(reason);
         if (reason?.response.status != 401) {
           const eventQueuStore = useEventQueuStore();
           eventQueuStore.push({
@@ -51,7 +50,6 @@ function getInviteLink(): Promise<InviteLink> {
       })
       .catch((reason) => {
         console.error(`Fail to get Invite !`);
-        console.log(reason);
         const eventQueuStore = useEventQueuStore();
         eventQueuStore.push({
           uuid: undefined,
@@ -77,7 +75,6 @@ function getTextChannels(guildId: string): Promise<Chanel[]> {
       })
       .catch((reason) => {
         console.error(`Fail to get text channels !`);
-        console.log(reason);
         const eventQueuStore = useEventQueuStore();
         eventQueuStore.push({
           uuid: undefined,
@@ -103,7 +100,6 @@ function getVoiceChannels(guildId: string): Promise<Chanel[]> {
       })
       .catch((reason) => {
         console.error(`Fail to get text channels !`);
-        console.log(reason);
         const eventQueuStore = useEventQueuStore();
         eventQueuStore.push({
           uuid: undefined,
@@ -128,7 +124,6 @@ function getRoles(guildId: string): Promise<Chanel[]> {
       })
       .catch((reason) => {
         console.error(`Fail to get roles !`);
-        console.log(reason);
         const eventQueuStore = useEventQueuStore();
         eventQueuStore.push({
           uuid: undefined,

src/services/settingsService.ts

@@ -3,7 +3,7 @@ import type { SettingDescrition } from "@/data/Setting/SettingDescription";
 import type { SettingValue } from "@/data/Setting/SettingValue";
 import { useEventQueuStore } from "@/stores/eventQueu";
 import { useUserStore } from "@/stores/user";
-import axios from "axios";
+import axios from "./axiosConfig";
 
 function getSettingDescrition() {
   return new Promise<SettingDescrition[]>((resole, reject) => {
@@ -35,7 +35,6 @@ function getSettingValues(guildId: string): Promise<RawSettingValue[]> {
       })
       .catch((reason) => {
         console.error(`Fail to get settings !`);
-        console.log(reason);
         const eventQueuStore = useEventQueuStore();
         eventQueuStore.push({
           uuid: undefined,
@@ -67,7 +66,6 @@ function sendSetting(
       })
       .catch((reason) => {
         console.error(`Fail to save settings !`);
-        console.log(reason);
         const eventQueuStore = useEventQueuStore();
         eventQueuStore.push({
           uuid: undefined,

src/stores/user.ts

@@ -1,6 +1,7 @@
 import { defineStore } from "pinia";
 import * as jose from "jose";
 import { cookiesStorage } from "./coockiesStorage";
+import type { RouteLocationRaw } from "vue-router";
 
 export const useUserStore = defineStore("user", {
   state: () => ({
@@ -11,6 +12,7 @@ export const useUserStore = defineStore("user", {
     token: "",
     loginFail: false,
     asExpired: false,
+    originRoute: undefined as RouteLocationRaw | undefined,
   }),
   getters: {
     isLoggedIn(): boolean {

src/views/oauth/OauthCallbackView.vue

@@ -13,13 +13,21 @@
 
 <script setup lang="ts">
 import { login } from "@/services/authService";
+import { useUserStore } from "@/stores/user";
 import { useRoute, useRouter } from "vue-router";
 
 const route = useRoute();
 const router = useRouter();
+const userStore = useUserStore();
 if (route.query.code) {
   login(route.query.code as string).then(() => {
+    if (userStore.originRoute) {
+      let route = JSON.parse(JSON.stringify(userStore.originRoute));
+      userStore.originRoute = undefined;
+      router.push(route);
+    } else {
       router.push("/");
+    }
   });
 } else {
   router.push({ name: "oauth-redirect" });