fix(projects): 修复权限切换路由数据未更新的问题

package.json

@@ -77,7 +77,7 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.7.1",
-    "husky": "^8.0.0",
+    "husky": "^8.0.1",
     "lint-staged": "^12.4.1",
     "mockjs": "^1.1.0",
     "patch-package": "^6.4.7",
@@ -89,7 +89,7 @@
     "typescript": "^4.6.4",
     "unocss": "^0.33.2",
     "unplugin-icons": "^0.14.3",
-    "unplugin-vue-components": "0.19.3",
+    "unplugin-vue-components": "0.19.5",
     "unplugin-vue-define-options": "^0.6.1",
     "vite": "^2.9.8",
     "vite-plugin-compression": "^0.5.1",

src/layouts/common/GlobalContent/index.vue

@@ -4,11 +4,13 @@
     class="h-full bg-[#f6f9f8] dark:bg-[#101014] transition duration-300 ease-in-out"
   >
     <router-view v-slot="{ Component, route }">
-      <transition :name="theme.page.animate ? theme.page.animateMode : undefined" mode="out-in" appear>
-        <keep-alive :include="routeStore.cacheRoutes">
-          <component :is="Component" v-if="app.reloadFlag" :key="route.path" />
-        </keep-alive>
-      </transition>
+      <div class="h-full">
+        <transition :name="theme.page.animate ? theme.page.animateMode : undefined" mode="out-in" appear>
+          <keep-alive :include="routeStore.cacheRoutes">
+            <component :is="Component" v-if="app.reloadFlag" :key="route.path" />
+          </keep-alive>
+        </transition>
+      </div>
     </router-view>
   </div>
 </template>

src/router/guard/dynamic.ts

@@ -1,4 +1,4 @@
-import type { Router, RouteLocationNormalized, NavigationGuardNext } from 'vue-router';
+import type { RouteLocationNormalized, NavigationGuardNext } from 'vue-router';
 import { routeName } from '@/router';
 import { useRouteStore } from '@/store';
 import { getToken } from '@/utils';
@@ -9,8 +9,7 @@ import { getToken } from '@/utils';
 export async function createDynamicRouteGuard(
   to: RouteLocationNormalized,
   _from: RouteLocationNormalized,
-  next: NavigationGuardNext,
-  router: Router
+  next: NavigationGuardNext
 ) {
   const route = useRouteStore();
   const isLogin = Boolean(getToken());
@@ -28,7 +27,7 @@ export async function createDynamicRouteGuard(
       return false;
     }
 
-    await route.initAuthRoute(router);
+    await route.initAuthRoute();
 
     if (to.name === routeName('not-found-page')) {
       // 动态路由没有加载导致被not-found-page路由捕获，等待权限路由加载好了，回到之前的路由

src/router/guard/index.ts

@@ -11,7 +11,7 @@ export function createRouterGuard(router: Router) {
     // 开始 loadingBar
     window.$loadingBar?.start();
     // 页面跳转权限处理
-    await createPermissionGuard(to, from, next, router);
+    await createPermissionGuard(to, from, next);
   });
   router.afterEach(to => {
     // 设置document title

src/router/guard/permission.ts

@@ -1,4 +1,4 @@
-import type { Router, RouteLocationNormalized, NavigationGuardNext } from 'vue-router';
+import type { RouteLocationNormalized, NavigationGuardNext } from 'vue-router';
 import { routeName } from '@/router';
 import { useAuthStore } from '@/store';
 import { exeStrategyActions, getToken } from '@/utils';
@@ -8,11 +8,10 @@ import { createDynamicRouteGuard } from './dynamic';
 export async function createPermissionGuard(
   to: RouteLocationNormalized,
   from: RouteLocationNormalized,
-  next: NavigationGuardNext,
-  router: Router
+  next: NavigationGuardNext
 ) {
   // 动态路由
-  const permission = await createDynamicRouteGuard(to, from, next, router);
+  const permission = await createDynamicRouteGuard(to, from, next);
   if (!permission) return;
 
   // 外链路由, 从新标签打开，返回上一个路由

src/store/modules/auth/index.ts

@@ -1,6 +1,6 @@
-import { unref, nextTick } from 'vue';
+import { unref } from 'vue';
 import { defineStore } from 'pinia';
-import { router as globalRouter } from '@/router';
+import { router } from '@/router';
 import { useRouterPush } from '@/composables';
 import { fetchLogin, fetchUserInfo } from '@/service';
 import { getUserInfo, getToken, setUserInfo, setToken, setRefreshToken, clearAuthStorage } from '@/utils';
@@ -34,26 +34,50 @@ export const useAuthStore = defineStore('auth-store', {
       const { toLogin } = useRouterPush(false);
       const { resetTabStore } = useTabStore();
       const { resetRouteStore } = useRouteStore();
-      const route = unref(globalRouter.currentRoute);
+      const route = unref(router.currentRoute);
 
       clearAuthStorage();
       this.$reset();
 
+      resetTabStore();
+      resetRouteStore();
+
       if (route.meta.requiresAuth) {
         toLogin();
       }
+    },
+    /**
+     * 处理登录后成功或失败的逻辑
+     * @param backendToken - 返回的token
+     */
+    async handleActionAfterLogin(backendToken: ApiAuth.Token) {
+      const { toLoginRedirect } = useRouterPush(false);
 
-      nextTick(() => {
-        resetTabStore();
-        resetRouteStore();
-      });
+      const loginSuccess = await this.loginByToken(backendToken);
+
+      if (loginSuccess) {
+        // 跳转登录后的地址
+        toLoginRedirect();
+
+        // 登录成功弹出欢迎提示
+        window.$notification?.success({
+          title: '登录成功!',
+          content: `欢迎回来，${this.userInfo.userName}!`,
+          duration: 3000
+        });
+
+        return;
+      }
+
+      // 不成功则重置状态
+      this.resetAuthStore();
     },
     /**
      * 根据token进行登录
      * @param backendToken - 返回的token
      */
     async loginByToken(backendToken: ApiAuth.Token) {
-      const { toLoginRedirect } = useRouterPush(false);
+      let successFlag = false;
 
       // 先把token存储到缓存中(后面接口的请求头需要token)
       const { token, refreshToken } = backendToken;
@@ -70,19 +94,10 @@ export const useAuthStore = defineStore('auth-store', {
         this.userInfo = data;
         this.token = token;
 
-        // 跳转登录后的地址
-        toLoginRedirect();
-
-        // 登录成功弹出欢迎提示
-        window.$notification?.success({
-          title: '登录成功!',
-          content: `欢迎回来，${data.userName}!`,
-          duration: 3000
-        });
-      } else {
-        // 不成功则重置状态
-        this.resetAuthStore();
+        successFlag = true;
       }
+
+      return successFlag;
     },
     /**
      * 登录
@@ -93,12 +108,38 @@ export const useAuthStore = defineStore('auth-store', {
       this.loginLoading = true;
       const { data } = await fetchLogin(userName, password);
       if (data) {
-        await this.loginByToken(data);
+        await this.handleActionAfterLogin(data);
       }
       this.loginLoading = false;
     },
-    updateUserRole(userRole: Auth.RoleType) {
-      this.userInfo.userRole = userRole;
+    /**
+     * 更换用户权限(切换账号)
+     * @param userRole
+     */
+    async updateUserRole(userRole: Auth.RoleType) {
+      const { resetRouteStore, initAuthRoute } = useRouteStore();
+
+      const accounts: Record<Auth.RoleType, { userName: string; password: string }> = {
+        super: {
+          userName: 'Super',
+          password: 'super123'
+        },
+        admin: {
+          userName: 'Admin',
+          password: 'admin123'
+        },
+        user: {
+          userName: 'User01',
+          password: 'user01123'
+        }
+      };
+      const { userName, password } = accounts[userRole];
+      const { data } = await fetchLogin(userName, password);
+      if (data) {
+        await this.loginByToken(data);
+        resetRouteStore();
+        initAuthRoute();
+      }
     }
   }
 });