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 { router } from 'src/router';
-import {IDomainInfo} from '../types/ActionTypes';
+import { IDomainInfo } from '../types/ActionTypes';
+import { jwtDecode } from "jwt-decode";
 
-
+export interface IUserState {
-export interface IUserState{
+  token?: string;
-  token?:string;
+  returnUrl: string;
-  returnUrl:string;
+  currentDomain: IDomainInfo;
-  currentDomain:IDomainInfo;
+  LeftDrawer: boolean;
-  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,
+    LeftDrawer: false,
-          currentDomain: JSON.parse(localStorage.getItem('currentDomain')||"{}")
+    currentDomain: {} as IDomainInfo,
-        }
+    userId:''
-    },
+  }),
-    getters:{
+  getters: {
-      toggleLeftDrawer():boolean{
+    toggleLeftDrawer(): boolean {
       return this.LeftDrawer;
-      }
+    },
   },
   actions: {
-        toggleLeftMenu(){
+    toggleLeftMenu() {
-          this.LeftDrawer=!this.LeftDrawer;
+      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{
+      try {
-              const result = await api.post(`api/token`,params);
+        const result = await api.post(`api/token`, params);
         console.info(result);
-              this.token =result.data.access_token;
+        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();
+        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;
       }
     },
-        async getCurrentDomain():Promise<IDomainInfo>{
+    async getCurrentDomain(): Promise<IDomainInfo> {
       const activedomain = await api.get(`api/activedomain`);
       return {
-            id:activedomain.data.id,
+        id: activedomain.data.id,
-            domainName:activedomain.data.name,
+        domainName: activedomain.data.name,
-            kintoneUrl:activedomain.data.url
+        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[];
+      const domains = resp.data as any[];
-          return domains.map(data=>{
+      return domains.map((data) => ({
-            return {
+        id: data.id,
-              id:data.id,
+        domainName: data.name,
-              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){
+    async setCurrentDomain(domain: IDomainInfo) {
-          if(domain.id===this.currentDomain.id){
+      if (domain.id === this.currentDomain.id) {
         return;
       }
       await api.put(`api/activedomain/${domain.id}`);
-          this.currentDomain=domain;
+      this.currentDomain = domain;
-          localStorage.setItem('currentDomain',JSON.stringify(this.currentDomain));
+    },
-        }
+  },
+  persist: {
+    afterRestore: (ctx) => {
+      api.defaults.headers['Authorization'] = 'Bearer ' + ctx.store.token;
     }
+  },
 });