diff --git a/frontend/src/boot/axios.ts b/frontend/src/boot/axios.ts index b12ede8..8548a4d 100644 --- a/frontend/src/boot/axios.ts +++ b/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 diff --git a/frontend/src/stores/useAuthStore.ts b/frontend/src/stores/useAuthStore.ts index 4d869a7..566750f 100644 --- a/frontend/src/stores/useAuthStore.ts +++ b/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); + } + ); + }, }, });