refactor: 优化路由守卫代码（同步 GiDemo 更新）

src/main.ts

@@ -9,8 +9,6 @@ import ArcoVueIcon from '@arco-design/web-vue/es/icon'
 import App from './App.vue'
 import router from './router'
 
-import '@/router/guard'
-
 // 使用动画库
 import 'animate.css/animate.min.css'
 
@@ -25,6 +23,8 @@ import 'virtual:svg-icons-register'
 
 // 自定义指令
 import directives from './directives'
+
+// 状态管理
 import pinia from '@/stores'
 
 // 对特定组件进行默认配置

src/router/guard.ts

@@ -1,6 +1,6 @@
 import { Button, Message, Notification, Space } from '@arco-design/web-vue'
 import NProgress from 'nprogress'
-import router from '@/router'
+import type { Router } from 'vue-router'
 import { useRouteStore, useUserStore } from '@/stores'
 import { getToken } from '@/utils/auth'
 import { isHttp } from '@/utils/validate'
@@ -36,7 +36,10 @@ const handleNotification = () => {
     closable: true,
     position: 'bottomRight',
     footer: () => {
-      return h(Space, {}, () => [h(Button, { type: 'primary', onClick: () => onUpdateSystem(id) }, '更新'), h(Button, { type: 'secondary', onClick: () => onCloseUpdateSystem(id) }, '关闭')])
+      return h(Space, {}, () => [h(Button, {
+        type: 'primary',
+        onClick: () => onUpdateSystem(id),
+      }, '更新'), h(Button, { type: 'secondary', onClick: () => onCloseUpdateSystem(id) }, '关闭')])
     },
   })
 }
@@ -75,64 +78,67 @@ export const resetHasRouteFlag = () => {
   hasRouteFlag = false
 }
 
-router.beforeEach(async (to, from, next) => {
-  NProgress.start()
-  const userStore = useUserStore()
-  const routeStore = useRouteStore()
-  // 判断该用户是否登录
-  if (getToken()) {
-    if (to.path === '/login') {
-      // 如果已经登录，并准备进入 Login 页面，则重定向到主页
-      next()
-    } else {
-      if (!hasRouteFlag) {
-        try {
-          await userStore.getInfo()
-          if (userStore.userInfo.pwdExpired && to.path !== '/pwdExpired') {
-            Message.warning('密码已过期，请修改密码')
-            next('/pwdExpired')
-          }
-          const accessRoutes = await routeStore.generateRoutes()
-          accessRoutes.forEach((route) => {
-            if (!isHttp(route.path)) {
-              router.addRoute(route) // 动态添加可访问路由表
-            }
-          })
-          hasRouteFlag = true
-          // 确保添加路由已完成
-          // 设置 replace: true, 因此导航将不会留下历史记录
-          next({ ...to, replace: true })
-        } catch (error: any) {
-          // 过程中发生任何错误，都直接重置 Token，并重定向到登录页面
-          await userStore.logoutCallBack()
-          next(`/login?redirect=${to.path}`)
-        }
-      } else {
+/** 初始化路由守卫 */
+export const setupRouterGuard = (router: Router) => {
+  router.beforeEach(async (to, from, next) => {
+    NProgress.start()
+    const userStore = useUserStore()
+    const routeStore = useRouteStore()
+    // 判断该用户是否登录
+    if (getToken()) {
+      if (to.path === '/login') {
+        // 如果已经登录，并准备进入 Login 页面，则重定向到主页
         next()
+      } else {
+        if (!hasRouteFlag) {
+          try {
+            await userStore.getInfo()
+            if (userStore.userInfo.pwdExpired && to.path !== '/pwdExpired') {
+              Message.warning('密码已过期，请修改密码')
+              next('/pwdExpired')
+            }
+            const accessRoutes = await routeStore.generateRoutes()
+            accessRoutes.forEach((route) => {
+              if (!isHttp(route.path)) {
+                router.addRoute(route) // 动态添加可访问路由表
+              }
+            })
+            hasRouteFlag = true
+            // 确保添加路由已完成
+            // 设置 replace: true, 因此导航将不会留下历史记录
+            next({ ...to, replace: true })
+          } catch (error: any) {
+            // 过程中发生任何错误，都直接重置 Token，并重定向到登录页面
+            await userStore.logoutCallBack()
+            next(`/login?redirect=${to.path}`)
+          }
+        } else {
+          next()
+        }
+      }
+    } else {
+      // 如果没有 Token
+      if (whiteList.includes(to.path)) {
+        // 如果在免登录的白名单中，则直接进入
+        next()
+      } else {
+        // 其他没有访问权限的页面将被重定向到登录页面
+        next('/login')
       }
     }
-  } else {
-    // 如果没有 Token
-    if (whiteList.includes(to.path)) {
-      // 如果在免登录的白名单中，则直接进入
-      next()
-    } else {
-      // 其他没有访问权限的页面将被重定向到登录页面
-      next('/login')
+
+    // 生产环境开启检测版本更新
+    const isProd = import.meta.env.PROD
+    if (isProd) {
+      await compareTag()
     }
-  }
+  })
 
-  // 生产环境开启检测版本更新
-  const isProd = import.meta.env.PROD
-  if (isProd) {
-    await compareTag()
-  }
-})
+  router.onError(() => {
+    NProgress.done()
+  })
 
-router.onError(() => {
-  NProgress.done()
-})
-
-router.afterEach(() => {
-  NProgress.done()
-})
+  router.afterEach(() => {
+    NProgress.done()
+  })
+}

src/router/index.ts

@@ -1,6 +1,7 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import { useRouteStore } from '@/stores'
 import { constantRoutes, systemRoutes } from '@/router/route'
+import { setupRouterGuard } from '@/router/guard'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -8,6 +9,8 @@ const router = createRouter({
   scrollBehavior: () => ({ left: 0, top: 0 }),
 })
 
+setupRouterGuard(router)
+
 /**
  * @description 重置路由
  * @description 注意：所有动态路由路由必须带有 name 属性，否则可能会不能完全重置干净