refactor(projects): 动态路由权限完善

src/store/modules/auth/index.ts

@@ -1,9 +1,11 @@
-import { unref } from 'vue';
+import { unref, nextTick } from 'vue';
 import { defineStore } from 'pinia';
 import { router as globalRouter } from '@/router';
 import { useRouterPush } from '@/composables';
 import { fetchLogin, fetchUserInfo } from '@/service';
 import { getUserInfo, getToken, setUserInfo, setToken, setRefreshToken, clearAuthStorage } from '@/utils';
+import { useTabStore } from '../tab';
+import { useRouteStore } from '../route';
 
 interface AuthState {
   /** 用户信息 */
@@ -30,6 +32,8 @@ export const useAuthStore = defineStore('auth-store', {
     /** 重置auth状态 */
     resetAuthStore() {
       const { toLogin } = useRouterPush(false);
+      const { resetTabStore } = useTabStore();
+      const { resetRouteStore } = useRouteStore();
       const route = unref(globalRouter.currentRoute);
 
       clearAuthStorage();
@@ -38,6 +42,11 @@ export const useAuthStore = defineStore('auth-store', {
       if (route.meta.requiresAuth) {
         toLogin();
       }
+
+      nextTick(() => {
+        resetTabStore();
+        resetRouteStore();
+      });
     },
     /**
      * 根据token进行登录
@@ -46,7 +55,7 @@ export const useAuthStore = defineStore('auth-store', {
     async loginByToken(backendToken: ApiAuth.Token) {
       const { toLoginRedirect } = useRouterPush(false);
 
-      // 先把token存储到缓存中
+      // 先把token存储到缓存中(后面接口的请求头需要token)
       const { token, refreshToken } = backendToken;
       setToken(token);
       setRefreshToken(refreshToken);
@@ -76,13 +85,12 @@ export const useAuthStore = defineStore('auth-store', {
     },
     /**
      * 登录
-     * @param phone - 手机号
-     * @param pwdOrCode - 密码或验证码
-     * @param type - 登录方式: pwd - 密码登录; sms - 验证码登录
+     * @param userName - 用户名
+     * @param password - 密码
      */
-    async login(phone: string, pwdOrCode: string, type: 'pwd' | 'sms') {
+    async login(userName: string, password: string) {
       this.loginLoading = true;
-      const { data } = await fetchLogin(phone, pwdOrCode, type);
+      const { data } = await fetchLogin(userName, password);
       if (data) {
         await this.loginByToken(data);
       }

src/store/modules/route/index.ts

@@ -43,6 +43,9 @@ export const useRouteStore = defineStore('route-store', {
     cacheRoutes: []
   }),
   actions: {
+    resetRouteStore() {
+      this.$reset();
+    },
     /**
      * 处理权限路由
      * @param routes - 权限路由
@@ -53,6 +56,7 @@ export const useRouteStore = defineStore('route-store', {
       this.searchMenus = transformAuthRoutesToSearchMenus(routes);
 
       const vueRoutes = transformAuthRoutesToVueRoutes(routes);
+
       vueRoutes.forEach(route => {
         router.addRoute(route);
       });

src/store/modules/tab/index.ts

@@ -1,7 +1,7 @@
 import type { Router, RouteLocationNormalizedLoaded } from 'vue-router';
 import { defineStore } from 'pinia';
 import { useRouterPush } from '@/composables';
-import { getTabRoutes } from '@/utils';
+import { getTabRoutes, clearTabRoutes } from '@/utils';
 import { useThemeStore } from '../theme';
 import { getTabRouteByVueRoute, isInTabRoutes, getIndexInTabRoutes } from './helpers';
 
@@ -38,6 +38,11 @@ export const useTabStore = defineStore('tab-store', {
     }
   },
   actions: {
+    /** 重置Tab状态 */
+    resetTabStore() {
+      clearTabRoutes();
+      this.$reset();
+    },
     /**
      * 设置当前路由对应的页签为激活状态
      * @param path - 路由path

src/store/modules/theme/helpers.ts

@@ -71,18 +71,3 @@ export function getNaiveThemeOverrides(colors: Record<ColorType, string>): Globa
     }
   };
 }
-
-/** windicss 暗黑模式 */
-export function handleWindicssDarkMode() {
-  const DARK_CLASS = 'dark';
-  function addDarkClass() {
-    document.documentElement.classList.add(DARK_CLASS);
-  }
-  function removeDarkClass() {
-    document.documentElement.classList.remove(DARK_CLASS);
-  }
-  return {
-    addDarkClass,
-    removeDarkClass
-  };
-}

src/store/subscribe/theme.ts

@@ -11,7 +11,7 @@ export default function subscribeThemeStore() {
   const theme = useThemeStore();
   const osTheme = useOsTheme();
   const { width } = useElementSize(document.documentElement);
-  const { addDarkClass, removeDarkClass } = handleWindicssDarkMode();
+  const { addDarkClass, removeDarkClass } = handleCssDarkMode();
 
   // 监听主题颜色
   const stopThemeColor = watch(
@@ -76,8 +76,8 @@ export default function subscribeThemeStore() {
   });
 }
 
-/** windicss 暗黑模式 */
-function handleWindicssDarkMode() {
+/** css 暗黑模式 */
+function handleCssDarkMode() {
   const DARK_CLASS = 'dark';
   function addDarkClass() {
     document.documentElement.classList.add(DARK_CLASS);