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

frontend/package.json

@@ -12,14 +12,15 @@
     "dev": "quasar dev",
     "dev:local": "set \"LOCAL=true\" && quasar dev",
     "build": "set \"SOURCE_MAP=false\" && quasar build",
-    "build:dev":"set \"SOURCE_MAP=true\" && 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

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