refactor: ♻️ 获取用户信息和登出清除会话优化

src/api/user/index.ts

@@ -5,7 +5,7 @@ import { UserForm, UserInfo, UserPageVO, UserQuery } from "./types";
 /**
  * 登录成功后获取用户信息（昵称、头像、权限集合和角色集合）
  */
-export function getUserInfo(): AxiosPromise<UserInfo> {
+export function getUserInfoApi(): AxiosPromise<UserInfo> {
   return request({
     url: "/api/v1/users/me",
     method: "get",

src/layout/index.vue

@@ -88,8 +88,6 @@ function toggleSideBar() {
     <Sidebar class="sidebar-container" />
     <template v-if="layout === 'mix'">
       <div class="mix-wrap">
-        <!-- :menu-list="mixLeftMenu -->
-        <!-- :menu-list="permissionStore.routes -->
         <div class="left-wrap">
           <LeftMenu :menu-list="mixLeftMenu" :base-path="activeTopMenu" />
           <div class="menu-action">
@@ -155,6 +153,7 @@ function toggleSideBar() {
   .main-container {
     padding-top: 50px;
     margin-left: 0;
+    overflow: hidden;
   }
 
   // 顶部模式全局变量修改

src/permission.ts

@@ -32,7 +32,7 @@ router.beforeEach(async (to, from, next) => {
         }
       } else {
         try {
-          const { roles } = await userStore.getInfo();
+          const { roles } = await userStore.getUserInfo();
           const accessRoutes = await permissionStore.generateRoutes(roles);
           accessRoutes.forEach((route) => {
             router.addRoute(route);
@@ -40,7 +40,7 @@ router.beforeEach(async (to, from, next) => {
           next({ ...to, replace: true });
         } catch (error) {
           // 移除 token 并跳转登录页
-          await userStore.resetStore();
+          await userStore.resetToken();
           next(`/login?redirect=${to.path}`);
           NProgress.done();
         }

src/store/modules/user.ts

@@ -1,7 +1,7 @@
 import { defineStore } from "pinia";
 
 import { loginApi, logoutApi } from "@/api/auth";
-import { getUserInfo } from "@/api/user";
+import { getUserInfoApi } from "@/api/user";
 import { resetRouter } from "@/router";
 import { store } from "@/store";
 
@@ -39,9 +39,9 @@ export const useUserStore = defineStore("user", () => {
   }
 
   // 获取信息(用户昵称、头像、角色集合、权限集合)
-  function getInfo() {
+  function getUserInfo() {
     return new Promise<UserInfo>((resolve, reject) => {
-      getUserInfo()
+      getUserInfoApi()
         .then(({ data }) => {
           if (!data) {
             reject("Verification failed, please Login again.");
@@ -60,12 +60,12 @@ export const useUserStore = defineStore("user", () => {
     });
   }
 
-  // 注销
+  // user logout
   function logout() {
     return new Promise<void>((resolve, reject) => {
       logoutApi()
         .then(() => {
-          resetStore();
+          token.value = "";
           location.reload(); // 清空路由
           resolve();
         })
@@ -75,19 +75,22 @@ export const useUserStore = defineStore("user", () => {
     });
   }
 
-  /** 清空缓存 */
-  function resetStore() {
-    resetRouter();
-    token.value = "";
-    Object.assign(user, { roles: [], perms: [] });
+  // remove token
+  function resetToken() {
+    return new Promise<void>((resolve) => {
+      token.value = "";
+      resetRouter();
+      resolve();
+    });
   }
+
   return {
     token,
     user,
     login,
-    getInfo,
+    getUserInfo,
     logout,
-    resetStore,
+    resetToken,
   };
 });
 

src/utils/request.ts

@@ -46,8 +46,10 @@ service.interceptors.response.use(
           confirmButtonText: "确定",
           type: "warning",
         }).then(() => {
-          localStorage.clear();
-          window.location.href = "/";
+          const userStore = useUserStoreHook();
+          userStore.resetToken().then(() => {
+            location.reload();
+          });
         });
       } else {
         ElMessage.error(msg || "系统出错");