front/src/router/guard/permission.ts

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()
  })
}