返回文档中心

菜单与路由

XYGo Admin 2025-02-20 174 次阅读

动态菜单加载、路由权限控制与前后台双路由体系

菜单与路由

双路由体系

XYGo Admin 采用前台 + 后台双路由体系，完全隔离：

路由 前缀 模式 说明
前台门户 / 静态注册 首页、文档、社区、会员中心
后台管理 /admin 动态加载 根据角色权限动态注册

前台路由

前台路由在 router/frontend/ 中静态定义，使用独立的 FrontendLayout 布局：

typescript 复制代码 
// router/frontend/index.ts
const frontendRoutes = [
  { path: '/', component: FrontendLayout, children: [
    { path: '', name: 'Home', component: () => import('@/views/frontend/index/index.vue') },
    { path: 'docs', name: 'Docs', component: () => import('@/views/frontend/docs/index.vue') },
    { path: 'community', name: 'Community', component: () => import('@/views/frontend/community/index.vue') },
    { path: 'cases', name: 'Cases', component: () => import('@/views/frontend/cases/index.vue') },
  ]}
]

后台动态路由

后台路由在用户首次访问 /admin/* 时从后端获取菜单数据并动态注册。

加载流程

复制代码 
用户访问 /admin/dashboard
  → beforeEach 路由守卫
    → 检查是否已登录（Token 存在）
      → 检查动态路由是否已注册
        → 未注册：调用后端接口获取菜单列表
          → RouteTransformer 转换为 Vue Router 路由
            → RouteRegistry 动态注册路由
              → 跳转目标页面

菜单数据结构

后端返回的菜单数据：

json 复制代码 
{
  "id": 1,
  "pid": 0,
  "title": "系统管理",
  "icon": "ri:settings-3-line",
  "path": "/system",
  "component": "LAYOUT",
  "type": 1,
  "children": [
    {
      "id": 2,
      "pid": 1,
      "title": "用户管理",
      "path": "user",
      "component": "/system/user/index",
      "authList": ["add", "edit", "delete"]
    }
  ]
}

路由核心工具

工具类 职责
RouteRegistry 动态路由注册与卸载
ComponentLoader 组件懒加载
RouteValidator 路由合法性验证
RouteTransformer 菜单数据 → Vue 路由转换
MenuProcessor 菜单数据处理
RoutePermissionValidator 路由权限校验
IframeRouteManager Iframe 页面路由管理

路由守卫

beforeEach（前置守卫）

  1. 白名单页面直接放行（登录、注册、前台页面）
  2. 未登录跳转登录页
  3. 已登录但未加载动态路由 → 加载菜单并注册
  4. 权限校验

afterEach（后置守卫）

  • 更新页面标题
  • 关闭加载进度条