import NProgress from 'nprogress' // progress bar 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 // 检查是否在白名单中 if (WHITE_LIST.find((el) => el.name === to.name)) { next() 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() else { const destination = Permission.findFirstPermissionRoute(appRoutes, userStore.role) || NOT_FOUND next(destination) } } NProgress.done() }) }