axiosでトークン取得を修正する

axiosでトークン取得を修正する

axiosでトークン取得を修正する

axiosでトークン取得を修正する

frontend/src/boot/axios.ts

@@ -2,6 +2,7 @@ import { boot } from 'quasar/wrappers';
 import axios, { AxiosInstance } from 'axios';
 import {router} from 'src/router';
 
+
 declare module '@vue/runtime-core' {
   interface ComponentCustomProperties {
     $axios: AxiosInstance;
@@ -15,30 +16,10 @@ declare module '@vue/runtime-core' {
 // good idea to move this instance creation inside of the
 // "export default () => {}" function below (which runs individually
 // for each client)
+
 const api:AxiosInstance = axios.create({ baseURL: process.env.KAB_BACKEND_URL });
-const token=localStorage.getItem('token')||'';
-if(token!==''){
-  api.defaults.headers["Authorization"]='Bearer ' + token;
-}
-//axios例外キャプチャー
-api.interceptors.response.use(
-  (response)=>response,
-  (error)=>{
-    if (error.response && error.response.status === 401) {
-      // 認証エラーの場合再ログインする
-      console.error('(; ﾟДﾟ)/認証エラー(401)：', error);
-      localStorage.removeItem('token');
-      router.replace({
-        path:"/login",
-        query:{redirect:router.currentRoute.value.fullPath}
-      });
-    }
-    return Promise.reject(error);
-  }
-)
 export default boot(({ app }) => {
   // for use inside Vue files (Options API) through this.$axios and this.$api
-
   app.config.globalProperties.$axios = axios;
   // ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
   //       so you won't necessarily have to import axios in each vue file

frontend/src/stores/useAuthStore.ts

@@ -2,14 +2,14 @@ import { defineStore } from 'pinia';
 import { api } from 'boot/axios';
 import { router } from 'src/router';
 import { IDomainInfo } from '../types/ActionTypes';
-import { jwtDecode } from "jwt-decode";
+import { jwtDecode } from 'jwt-decode';
 
 export interface IUserState {
   token?: string;
   returnUrl: string;
   currentDomain: IDomainInfo;
   LeftDrawer: boolean;
-  userId?:string;
+  userId?: string;
 }
 
 export const useAuthStore = defineStore('auth', {
@@ -18,7 +18,7 @@ export const useAuthStore = defineStore('auth', {
     returnUrl: '',
     LeftDrawer: false,
     currentDomain: {} as IDomainInfo,
-    userId:''
+    userId: '',
   }),
   getters: {
     toggleLeftDrawer(): boolean {
@@ -37,10 +37,10 @@ export const useAuthStore = defineStore('auth', {
         const result = await api.post(`api/token`, params);
         console.info(result);
         this.token = result.data.access_token;
-        this.userId=jwtDecode(result.data.access_token).sub
+        this.userId = jwtDecode(result.data.access_token).sub;
         api.defaults.headers['Authorization'] = 'Bearer ' + this.token;
         this.currentDomain = await this.getCurrentDomain();
-        this.router.push(this.returnUrl || '/');
+        router.push(this.returnUrl || '/');
         return true;
       } catch (e) {
         console.error(e);
@@ -80,6 +80,19 @@ export const useAuthStore = defineStore('auth', {
   persist: {
     afterRestore: (ctx) => {
       api.defaults.headers['Authorization'] = 'Bearer ' + ctx.store.token;
-    }
+
+      //axios例外キャプチャー
+      api.interceptors.response.use(
+        (response) => response,
+        (error) => {
+          if (error.response && error.response.status === 401) {
+            // 認証エラーの場合再ログインする
+            console.error('(; ﾟДﾟ)/認証エラー(401)：', error);
+            ctx.store.logout();
+          }
+          return Promise.reject(error);
+        }
+      );
+    },
   },
 });