Skip to content

路由系统 ​

路由入口:admin/src/router/index.ts。常量路由与占位父路由在 routes.config.ts;鉴权与动态挂载在 permission.guard.ts;首次拉取站点配置在 auth.guard.ts(createInitGuard)。

常量路由 ​

constantRoutes 启动时即注册,无需登录菜单:

路径 / 名称说明
/:pathMatch(.*)*(NOT_FOUND_ROUTE)404
/403、/500错误页
/login登录
/diy/editor(DiyEditor)装修编辑器,hideTab: true

父占位 INDEX_ROUTE:path: '/',name: INDEX_ROUTE_NAME('INDEX_ROUTE'),组件为 LAYOUT(@/layout/index.vue)。redirect 不在配置里写死为 /,由守卫在拿到菜单后设为第一个可进页面,避免自引用死循环。

动态路由 ​

  1. 守卫确认有 token,且尚未 isRoutesInited 时调用 userStore.getUserInfo() / fetchMenus()
  2. filterAsyncRoutes(rawRoutes) 把后端 MenuInfo 转成 RouteRecordRaw[]
  3. findFirstValidPath 找第一个 meta.type === 2、未隐藏、非外链的 path,赋给 INDEX_ROUTE.redirect
  4. router.addRoute(INDEX_ROUTE),再把子路由挂到 INDEX_ROUTE_NAME 下
  5. userStore.setRoutes(accessedRoutes),next({ ...to, replace: true })

工具函数(均在 router/index.ts):

  • loadRouteView(component):import.meta.glob('../views/**/*.vue') 按路径加载;找不到则降级 404
  • createRouteRecord:拼 path/name/meta;component === 'LAYOUT' 用 RouterView;菜单类型(type === 2)用具体页面
  • getModulesKey / getRoutePath / resetRouter:调试、按权限码反查 path、登出清动态路由

meta 映射:hidden、keepAlive←cache、title、perms←permission、icon、type、activeMenu。

守卫行为摘要 ​

permission.guard(createPermissionGuard)

  • 白名单:/login、/403、/404、/500
  • 无 token → 登录页并带 redirect
  • 有 token 且用户信息与路由已就绪 → 放行(访问登录页则进 /)
  • 初始化失败 → clearAuthInfo() 后回登录
  • NProgress 控制顶栏进度;afterEach 结束进度条

auth.guard(createInitGuard)

  • 非登录页且 appStore.config 为空时调用 getConfig(),并按返回的 site_favicon 更新 favicon

History 模式:createWebHistory(import.meta.env.BASE_URL),与 Vite base: '/admin/' 一致。

基于 MIT 许可发布