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')||'';
+    returnUrl: '',
-      if(token!==''){
+    LeftDrawer: false,
-        api.defaults.headers["Authorization"]='Bearer ' + token;
+    currentDomain: {} as IDomainInfo,
+    userId:''
+  }),
+  getters: {
+    toggleLeftDrawer(): boolean {
+      return this.LeftDrawer;
+    },
+  },
+  actions: {
+    toggleLeftMenu() {
+      this.LeftDrawer = !this.LeftDrawer;
+    },
+    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);
+        console.info(result);
+        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.error(e);
+        return false;
       }
+    },
+    async getCurrentDomain(): Promise<IDomainInfo> {
+      const activedomain = await api.get(`api/activedomain`);
       return {
-          token,
+        id: activedomain.data.id,
-          returnUrl: '',
+        domainName: activedomain.data.name,
-          LeftDrawer:false,
+        kintoneUrl: activedomain.data.url,
-          currentDomain: JSON.parse(localStorage.getItem('currentDomain')||"{}")
+      };
-        }
     },
-    getters:{
+    async getUserDomains(): Promise<IDomainInfo[]> {
-      toggleLeftDrawer():boolean{
+      const resp = await api.get(`api/domain`);
-          return this.LeftDrawer;
+      const domains = resp.data as any[];
+      return domains.map((data) => ({
+        id: data.id,
+        domainName: data.name,
+        kintoneUrl: data.url,
+      }));
+    },
+    logout() {
+      this.token = '';
+      this.currentDomain = {} as IDomainInfo; // 清空当前域
+      router.push('/login');
+    },
+    async setCurrentDomain(domain: IDomainInfo) {
+      if (domain.id === this.currentDomain.id) {
+        return;
       }
+      await api.put(`api/activedomain/${domain.id}`);
+      this.currentDomain = domain;
     },
-    actions: {
+  },
-        toggleLeftMenu(){
+  persist: {
-          this.LeftDrawer=!this.LeftDrawer;
+    afterRestore: (ctx) => {
-        },
+      api.defaults.headers['Authorization'] = 'Bearer ' + ctx.store.token;
-        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);
-              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.router.push(this.returnUrl || '/');
-              return true;
-          }catch(e)
-          {
-              console.info(e);
-              return false;
-          }
-        },
-        async getCurrentDomain():Promise<IDomainInfo>{
-          const activedomain = await api.get(`api/activedomain`);
-          return {
-            id:activedomain.data.id,
-            domainName:activedomain.data.name,
-            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 {
-              id:data.id,
-              domainName:data.name,
-              kintoneUrl:data.url
-            }
-          });
-        },
-        logout() {
-            this.token = undefined;
-            localStorage.removeItem('token');
-            localStorage.removeItem('currentDomain');
-            router.push('/login');
-        },
-        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));
-        }
     }
+  },
 });