fix: 修复 store 中并未对 localStorage 的 TOKEN_NAME 键进行赋值的缺陷 (#504)

* fix: 接口请求不携带token * fix: 优化token持久化策略 * fix: 删除多余的log
Tencent · May 18, 2023 · 665e0da · 665e0da
1 parent 03adc83
commit 665e0da
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 9 deletions.
diff --git a/src/permission.ts b/src/permission.ts
@@ -4,6 +4,7 @@ import NProgress from 'nprogress'; // progress bar
 import { MessagePlugin } from 'tdesign-vue-next';
 import { RouteRecordRaw } from 'vue-router';
 
+import { TOKEN_NAME } from '@/config/global';
 import router from '@/router';
 import { getPermissionStore, getUserStore } from '@/store';
 import { PAGE_NOT_FOUND_ROUTE } from '@/utils/route/constant';
@@ -17,8 +18,8 @@ router.beforeEach(async (to, from, next) => {
   const { whiteListRouters } = permissionStore;
 
   const userStore = getUserStore();
-  const { token } = userStore;
-  if (token) {
+
+  if (userStore[TOKEN_NAME]) {
     if (to.path === '/login') {
       next();
       return;

diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
@@ -10,7 +10,7 @@ const InitUserInfo = {
 
 export const useUserStore = defineStore('user', {
   state: () => ({
-    token: localStorage.getItem(TOKEN_NAME) || 'main_token', // 默认token不走权限
+    [TOKEN_NAME]: 'main_token', // 默认token不走权限
     userInfo: { ...InitUserInfo },
   }),
   getters: {
@@ -49,7 +49,7 @@ export const useUserStore = defineStore('user', {
 
       const res = await mockLogin(userInfo);
       if (res.code === 200) {
-        this.token = res.data;
+        this.setToken(res.data);
       } else {
         throw res;
       }
@@ -67,24 +67,28 @@ export const useUserStore = defineStore('user', {
           roles: ['UserIndex', 'DashboardBase', 'login'], // 前端权限模型使用 如果使用请配置modules/permission-fe.ts使用
         };
       };
-      const res = await mockRemoteUserInfo(this.token);
+      const res = await mockRemoteUserInfo(this[TOKEN_NAME]);
 
       this.userInfo = res;
     },
     async logout() {
-      localStorage.removeItem(TOKEN_NAME);
-      this.token = '';
+      this.removeToken();
       this.userInfo = { ...InitUserInfo };
     },
     async removeToken() {
-      this.token = '';
+      this.setToken('');
+    },
+    async setToken(token: string) {
+      this[TOKEN_NAME] = token;
     },
   },
   persist: {
     afterRestore: () => {
       const permissionStore = usePermissionStore();
       permissionStore.initRoutes();
     },
+    key: 'user',
+    paths: [TOKEN_NAME],
   },
 });
 

diff --git a/src/utils/request/index.ts b/src/utils/request/index.ts
@@ -5,6 +5,7 @@ import merge from 'lodash/merge';
 
 import { TOKEN_NAME } from '@/config/global';
 import { ContentTypeEnum } from '@/constants';
+import { getUserStore } from '@/store';
 
 import { VAxios } from './Axios';
 import type { AxiosTransform, CreateAxiosOptions } from './AxiosTransform';
@@ -113,7 +114,9 @@ const transform: AxiosTransform = {
   // 请求拦截器处理
   requestInterceptors: (config, options) => {
     // 请求之前处理config
-    const token = localStorage.getItem(TOKEN_NAME);
+    const userStore = getUserStore();
+    const token = userStore[TOKEN_NAME];
+
     if (token && (config as Recordable)?.requestOptions?.withToken !== false) {
       // jwt token
       (config as Recordable).headers.Authorization = options.authenticationScheme