diff --git a/frontend/package.json b/frontend/package.json index 548b749..cbca6a3 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/stores/index.ts b/frontend/src/stores/index.ts index d30b7cf..9dae28c 100644 --- a/frontend/src/stores/index.ts +++ b/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) diff --git a/frontend/src/stores/useAuthStore.ts b/frontend/src/stores/useAuthStore.ts index a2c3f84..4d869a7 100644 --- a/frontend/src/stores/useAuthStore.ts +++ b/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; +export const useAuthStore = defineStore('auth', { + state: (): IUserState => ({ + token: '', + returnUrl: '', + LeftDrawer: false, + 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 { + const activedomain = await api.get(`api/activedomain`); return { - token, - returnUrl: '', - LeftDrawer:false, - currentDomain: JSON.parse(localStorage.getItem('currentDomain')||"{}") - } + id: activedomain.data.id, + domainName: activedomain.data.name, + kintoneUrl: activedomain.data.url, + }; }, - getters:{ - toggleLeftDrawer():boolean{ - return this.LeftDrawer; + async getUserDomains(): Promise { + const resp = await api.get(`api/domain`); + 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(){ - 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; - 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{ - const activedomain = await api.get(`api/activedomain`); - return { - id:activedomain.data.id, - domainName:activedomain.data.name, - kintoneUrl:activedomain.data.url - } - }, - async getUserDomains():Promise{ - 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)); - } + }, + persist: { + afterRestore: (ctx) => { + api.defaults.headers['Authorization'] = 'Bearer ' + ctx.store.token; } + }, });