From 65684c2317a8c1b6a42c16a7950f68f9c7c1a662 Mon Sep 17 00:00:00 2001 From: SebClem Date: Fri, 24 Jun 2022 17:51:01 +0200 Subject: [PATCH] :hammer: Catch 401 error of all requests --- src/main.ts | 1 - src/router/index.ts | 16 +++--------- src/services/audioService.ts | 11 ++------ src/services/authService.ts | 6 +++-- src/services/axiosConfig.ts | 37 +++++++++++++++++++++++++++ src/services/guildService.ts | 7 +---- src/services/settingsService.ts | 4 +-- src/stores/user.ts | 2 ++ src/views/oauth/OauthCallbackView.vue | 10 +++++++- 9 files changed, 60 insertions(+), 34 deletions(-) create mode 100644 src/services/axiosConfig.ts diff --git a/src/main.ts b/src/main.ts index 83d7b36..c53b720 100644 --- a/src/main.ts +++ b/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"); diff --git a/src/router/index.ts b/src/router/index.ts index 1c4190d..f5f5d78 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -76,18 +76,10 @@ router.beforeEach((to, from) => { } else { const mutualGuildsStore = useMutualGuildsStore(); if (store.isLoggedIn) { - 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" }); - } - }); + getMutualGuilds().then((value) => { + mutualGuildsStore.guilds = value; + mutualGuildsStore.loaded = true; + }); } } }); diff --git a/src/services/audioService.ts b/src/services/audioService.ts index f837272..d36c0b3 100644 --- a/src/services/audioService.ts +++ b/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, diff --git a/src/services/authService.ts b/src/services/authService.ts index 3d8ddf0..6bc9158 100644 --- a/src/services/authService.ts +++ b/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 { @@ -33,7 +33,6 @@ async function login(code: string): Promise { 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 { function logout(expired: boolean, loginFail: boolean): void { const userStore = useUserStore(); + if (!userStore.isLoggedIn) { + return; + } userStore.token = ""; userStore.userName = ""; userStore.discordId = ""; diff --git a/src/services/axiosConfig.ts b/src/services/axiosConfig.ts new file mode 100644 index 0000000..c0f5a38 --- /dev/null +++ b/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; diff --git a/src/services/guildService.ts b/src/services/guildService.ts index 7cf4c05..bf96acc 100644 --- a/src/services/guildService.ts +++ b/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 { return new Promise((resolve, reject) => { @@ -21,7 +21,6 @@ function getMutualGuilds(): Promise { }) .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 { }) .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 { }) .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 { }) .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 { }) .catch((reason) => { console.error(`Fail to get roles !`); - console.log(reason); const eventQueuStore = useEventQueuStore(); eventQueuStore.push({ uuid: undefined, diff --git a/src/services/settingsService.ts b/src/services/settingsService.ts index 0fd4e65..4f5c65b 100644 --- a/src/services/settingsService.ts +++ b/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((resole, reject) => { @@ -35,7 +35,6 @@ function getSettingValues(guildId: string): Promise { }) .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, diff --git a/src/stores/user.ts b/src/stores/user.ts index 955ea13..a8a0802 100644 --- a/src/stores/user.ts +++ b/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 { diff --git a/src/views/oauth/OauthCallbackView.vue b/src/views/oauth/OauthCallbackView.vue index e66b0f3..1aaf2a3 100644 --- a/src/views/oauth/OauthCallbackView.vue +++ b/src/views/oauth/OauthCallbackView.vue @@ -13,13 +13,21 @@