🔨 Catch 401 error of all requests

This commit is contained in:
SebClem 2022-06-24 17:51:01 +02:00
parent be82cc4aa1
commit 65684c2317
Signed by: sebclem
GPG Key ID: 5A4308F6A359EA50
9 changed files with 60 additions and 34 deletions

View File

@ -12,6 +12,5 @@ const pinia = createPinia();
pinia.use(piniaPluginPersistedstate); pinia.use(piniaPluginPersistedstate);
axios.defaults.baseURL = import.meta.env.VITE_API_BASE_URL; 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"); createApp(App).use(router).use(vuetify).use(pinia).mount("#app");

View File

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

View File

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

View File

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

View File

@ -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;

View File

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

View File

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

View File

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

View File

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