feat

src/router/guard/permission.ts

@@ -1,40 +1,73 @@
 import NProgress from 'nprogress' // progress bar
-import type { Router, RouteRecordNormalized } from 'vue-router'
+import type { Router, RouteLocationRaw } from 'vue-router'
 
 import usePermission from '@/hooks/permission'
 import { useAppStore, useUserStore } from '@/store'
 import { NOT_FOUND, WHITE_LIST } from '../constants'
 import { appRoutes } from '../routes'
 
+// 标记菜单是否正在加载，防止重复加载
+let isMenuLoading = false
+// 标记菜单是否已加载
+let isMenuLoaded = false
+
 export default function setupPermissionGuard(router: Router) {
   router.beforeEach(async (to, from, next) => {
     const appStore = useAppStore()
     const userStore = useUserStore()
     const Permission = usePermission()
     const permissionsAllow = Permission.accessRouter(to)
+    
     if (appStore.menuFromServer) {
       // 针对来自服务端的菜单配置进行处理
       // Handle routing configuration from the server
 
-      // 根据需要自行完善来源于服务端的菜单配置的permission逻辑
-      // Refine the permission logic from the server's menu configuration as needed
-      if (!appStore.appAsyncMenus.length && !WHITE_LIST.find((el) => el.name === to.name)) {
-        await appStore.fetchServerMenuConfig()
-      }
-      const serverMenuConfig = [...appStore.appAsyncMenus, ...WHITE_LIST]
-
-      let exist = false
-      while (serverMenuConfig.length && !exist) {
-        const element = serverMenuConfig.shift()
-        if (element?.name === to.name) exist = true
-
-        if (element?.children) {
-          serverMenuConfig.push(...(element.children as unknown as RouteRecordNormalized[]))
-        }
-      }
-      if (exist && permissionsAllow) {
+      // 检查是否在白名单中
+      if (WHITE_LIST.find((el) => el.name === to.name)) {
         next()
-      } else next(NOT_FOUND)
+        NProgress.done()
+        return
+      }
+      console.log('[Permission Guard] Menu not loaded, loading...')
+
+      // 检查动态路由是否已加载（使用标志位而非菜单长度，更可靠）
+      if (!isMenuLoaded && !isMenuLoading) {
+        console.log('[Permission Guard] Menu not loaded, loading...')
+        // 设置加载标志
+        isMenuLoading = true
+        try {
+          // 动态路由未加载，先获取菜单配置并注册路由
+          await appStore.fetchServerMenuConfig()
+          // 标记加载完成
+          isMenuLoaded = true
+          console.log('[Permission Guard] Menu loaded, redirecting to:', to.path)
+          // 路由注册后需要重新导航到当前路径
+          next({ path: to.path, query: to.query, params: to.params, replace: true } as RouteLocationRaw)
+        } catch (error) {
+          console.error('[Permission Guard] Failed to load menu:', error)
+          isMenuLoading = false
+          next(NOT_FOUND)
+        } finally {
+          isMenuLoading = false
+        }
+        NProgress.done()
+        return
+      }
+
+      // 如果正在加载菜单，等待加载完成
+      if (isMenuLoading) {
+        next({ path: to.path, query: to.query, params: to.params, replace: true } as RouteLocationRaw)
+        NProgress.done()
+        return
+      }
+
+      // 动态路由已加载，直接放行
+      // 因为路由已经通过 addRoute 注册，Vue Router 会自动匹配
+      if (permissionsAllow) {
+        next()
+      } else {
+        next(NOT_FOUND)
+      }
     } else {
       // eslint-disable-next-line no-lonely-if
       if (permissionsAllow) next()