pinia-plugin-persistedstate を使用して pinia に永続性を提供し、authStore に userId メンバーを追加する

frontend/package.json

@@ -13,13 +13,14 @@
     "dev:local": "set \"LOCAL=true\" && quasar dev",
     "build": "set \"SOURCE_MAP=false\" && quasar build",
     "build:dev": "set \"SOURCE_MAP=true\" && quasar build"
-
   },
   "dependencies": {
     "@quasar/extras": "^1.16.4",
     "@vueuse/core": "^10.9.0",
     "axios": "^1.4.0",
+    "jwt-decode": "^4.0.0",
     "pinia": "^2.1.7",
+    "pinia-plugin-persistedstate": "^3.2.1",
     "quasar": "^2.6.0",
     "uuid": "^9.0.0",
     "vue": "^3.0.0",

frontend/src/stores/index.ts

@@ -1,6 +1,7 @@
 import { store } from 'quasar/wrappers'
 import { createPinia } from 'pinia'
 import { Router } from 'vue-router';
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
 
 /*
  * When adding new properties to stores, you should also
@@ -24,6 +25,7 @@ declare module 'pinia' {
 
 export default store((/* { ssrContext } */) => {
   const pinia = createPinia()
+  pinia.use(piniaPluginPersistedstate)
 
   // You can add Pinia plugins here
   // pinia.use(SomePiniaPlugin)

frontend/src/stores/useAuthStore.ts

@@ -2,33 +2,28 @@ import { defineStore } from 'pinia';
 import { api } from 'boot/axios';
 import { router } from 'src/router';
 import { IDomainInfo } from '../types/ActionTypes';
-
+import { jwtDecode } from "jwt-decode";
 
 export interface IUserState {
   token?: string;
   returnUrl: string;
   currentDomain: IDomainInfo;
   LeftDrawer: boolean;
+  userId?:string;
 }
 
-export const useAuthStore = defineStore({
+export const useAuthStore = defineStore('auth', {
-    id: 'auth',
+  state: (): IUserState => ({
-    state: ():IUserState =>{
+    token: '',
-      const token=localStorage.getItem('token')||'';
-      if(token!==''){
-        api.defaults.headers["Authorization"]='Bearer ' + token;
-      }
-      return {
-          token,
     returnUrl: '',
     LeftDrawer: false,
-          currentDomain: JSON.parse(localStorage.getItem('currentDomain')||"{}")
+    currentDomain: {} as IDomainInfo,
-        }
+    userId:''
-    },
+  }),
   getters: {
     toggleLeftDrawer(): boolean {
       return this.LeftDrawer;
-      }
+    },
   },
   actions: {
     toggleLeftMenu() {
@@ -42,15 +37,13 @@ export const useAuthStore = defineStore({
         const result = await api.post(`api/token`, params);
         console.info(result);
         this.token = result.data.access_token;
-              localStorage.setItem('token', result.data.access_token);
+        this.userId=jwtDecode(result.data.access_token).sub
-              api.defaults.headers["Authorization"]='Bearer ' + this.token;
+        api.defaults.headers['Authorization'] = 'Bearer ' + this.token;
         this.currentDomain = await this.getCurrentDomain();
-              localStorage.setItem('currentDomain',JSON.stringify(this.currentDomain));
         this.router.push(this.returnUrl || '/');
         return true;
-          }catch(e)
+      } catch (e) {
-          {
+        console.error(e);
-              console.info(e);
         return false;
       }
     },
@@ -59,24 +52,21 @@ export const useAuthStore = defineStore({
       return {
         id: activedomain.data.id,
         domainName: activedomain.data.name,
-            kintoneUrl:activedomain.data.url
+        kintoneUrl: activedomain.data.url,
-          }
+      };
     },
     async getUserDomains(): Promise<IDomainInfo[]> {
       const resp = await api.get(`api/domain`);
       const domains = resp.data as any[];
-          return domains.map(data=>{
+      return domains.map((data) => ({
-            return {
         id: data.id,
         domainName: data.name,
-              kintoneUrl:data.url
+        kintoneUrl: data.url,
-            }
+      }));
-          });
     },
     logout() {
-            this.token = undefined;
+      this.token = '';
-            localStorage.removeItem('token');
+      this.currentDomain = {} as IDomainInfo; // 清空当前域
-            localStorage.removeItem('currentDomain');
       router.push('/login');
     },
     async setCurrentDomain(domain: IDomainInfo) {
@@ -85,7 +75,11 @@ export const useAuthStore = defineStore({
       }
       await api.put(`api/activedomain/${domain.id}`);
       this.currentDomain = domain;
-          localStorage.setItem('currentDomain',JSON.stringify(this.currentDomain));
+    },
-        }
+  },
+  persist: {
+    afterRestore: (ctx) => {
+      api.defaults.headers['Authorization'] = 'Bearer ' + ctx.store.token;
     }
+  },
 });