import { defineStore } from 'pinia'; import type { RouteRecordRaw } from 'vue-router'; import { store } from '@/store'; import { login } from '@/api/login'; import { ACCESS_TOKEN_KEY } from '@/enums/cacheEnum'; import { ACCESS_TOKEN_NAME } from '@/enums/cacheEnum'; import { Storage } from '@/utils/Storage'; import { logout, getInfo, permmenu } from '@/api/account'; // 动态路由生成 import { generatorDynamicRouter } from '@/router/generator-router'; import { resetRouter } from '@/router'; interface UserState { token: string; tokenName: string; name: string; avatar: string; // like [ 'sys:user:add', 'sys:user:update' ] perms: string[]; menus: RouteRecordRaw[]; userInfo: Partial; } const userInfo = {}; const perms = []; const menus = []; export const useUserStore = defineStore({ id: 'user', state: (): UserState => ({ token: Storage.get(ACCESS_TOKEN_KEY, null), tokenName: Storage.get(ACCESS_TOKEN_NAME, null), name: 'amdin', avatar: '', perms: [], menus: [], userInfo: {}, }), getters: { getToken(): string { return this.token; }, getAvatar(): string { return this.avatar; }, getName(): string { return this.name; }, getPerms(): string[] { return this.perms; }, }, actions: { /** 清空token及用户信息 */ resetToken() { this.avatar = this.token = this.name = ''; this.perms = []; this.menus = []; this.userInfo = {}; Storage.clear(); }, /** 登录成功保存token */ setToken(token: string, tokenName: string) { this.token = token ?? ''; this.tokenName = tokenName ?? ''; const ex = 7 * 24 * 60 * 60 * 1000; Storage.set(ACCESS_TOKEN_KEY, this.token, ex); Storage.set(ACCESS_TOKEN_NAME, this.tokenName, ex); }, /** 登录 */ async login(params: API.LoginParams) { try { const res = await login(params); console.log('res: ', res); this.setToken(res.tokenValue, res.tokenName); return this.afterLogin(); } catch (error) { console.log('error: ', error); return Promise.reject(error); } }, /** 登录成功之后, 获取用户信息以及生成权限路由 */ async afterLogin() { try { // const [userInfo, { perms, menus }] = await Promise.all([getInfo(), permmenu()]); this.perms = perms; this.name = userInfo.name; this.avatar = userInfo.headImg; this.userInfo = userInfo as any; // 生成路由 const generatorResult = await generatorDynamicRouter([]); console.timeEnd('generatorDynamicRouter'); this.menus = generatorResult.menus.filter((item) => !item.meta?.hideInMenu); console.log('this.menus: ', this.menus); return { menus, perms, userInfo }; } catch (error) { return this.logout(); } }, /** 登出 */ async logout() { this.resetToken(); resetRouter(); }, }, }); // 在组件setup函数外使用 export function useUserStoreWithOut() { return useUserStore(store); }