路由与权限

本文面向需要新增页面、配置菜单、排查按钮权限或定位动态路由问题的研发人员。商业版前端不是纯前端硬编码菜单，而是由“前端路由模板 + 后端菜单数据 + 当前用户权限”共同决定最终界面。

核心结论

前端里存在的是“可注册的页面能力”，用户最终能看到什么，取决于：

1. 当前用户是否登录
2. 后端返回了哪些菜单
3. 当前角色拥有哪些权限
4. 菜单配置是否能正确映射到前端页面组件

路由分为两类

静态路由

定义在 src/router/routes/staticRoutes.ts，主要包括：

• 登录
• 注册
• 忘记密码
• 异常页
• 外链 iframe 容器页

这类页面不依赖后台菜单即可访问。

动态路由

定义入口在 src/router/routes/asyncRoutes.ts，实际模板来源于 src/router/modules/*.ts。

例如：

• dashboard.ts
• system.ts
• monitor.ts
• scheduler.ts
• workflow.ts
• content.ts
• mall.ts

这些不是“最终菜单”，而是前端预置好的可用模块。

登录后的初始化流程

登录后页面能正常出来，背后通常会经过这条链路：

1. 判断登录状态
2. 如果页面刷新过，先尝试恢复 Access Token
3. 获取当前用户信息
4. 获取菜单数据
5. 菜单数据转换为前端动态路由
6. 注册路由
7. 计算首页路径
8. 渲染菜单并跳转到目标页面

因此，“登录成功但菜单空白”通常不是单个页面问题，而是初始化链路中的某一步失败。

菜单和路由的分工

前端负责

• 提供可匹配的页面组件
• 提供路由模板和元信息
• 负责把菜单映射为真实路由

后端负责

• 决定当前账号能看到哪些菜单
• 决定按钮权限项
• 决定某些页面和动作是否可用

按钮权限

很多页面的 meta.authList 会声明按钮动作，例如：

• add
• edit
• delete
• publish
• view

这些标记的作用是：

• 告诉前端当前页面有哪些操作能力
• 让后端菜单和按钮权限项有统一对应关系
• 让按钮显示逻辑更可控

因此，扩展开发时新增按钮不仅要修改页面，还需要同步考虑前端声明、后端菜单按钮权限和接口权限。

常见开发场景

场景一：新增一个业务页面

通常至少要做这些事：

1. 在 views 新建页面
2. 在 router/modules 增加路由模板
3. 在后端菜单里配置菜单项
4. 给角色分配菜单权限
5. 如果有操作按钮，再补按钮权限项

场景二：页面存在但菜单不显示

优先排查：

• 后端是否返回了该菜单
• 当前角色是否拥有该菜单权限
• 菜单 component 路径是否能映射到前端页面

场景三：按钮不显示或点了报 403

优先排查：

• 页面 authList 是否声明
• 后端菜单里是否创建了按钮权限项
• 后端 API 权限是否同步配置

最常见的三类异常

404

通常意味着：

• 路由未注册成功
• 组件路径有误
• 后端菜单配置和前端组件路径不匹配

500

通常意味着：

• 守卫初始化链路抛错
• 用户信息或菜单初始化异常
• 路由处理核心逻辑报错

页面能进但内容权限不对

通常意味着：

• 菜单权限正常
• 但按钮权限、接口权限或数据权限缺失

检查清单

• 一个页面是静态路由还是动态路由
• 菜单到底由谁控制
• 某个用户能看到页面但不能操作时，应优先排查哪些层级
• 新增功能时要改前端哪些地方、后端哪些地方