标准答案
- 权限路由控制用户能否进入某个页面，通常基于登录态、角色、权限码或资源关系判断。
- 菜单权限控制导航是否展示某个入口，但隐藏菜单不能替代路由拦截。
- 按钮权限控制页面内操作入口，例如新增、编辑、删除、导出。
- 权限数据应有稳定模型，例如 permissions、roles、resources，而不是页面里到处写硬编码判断。
- 后端接口必须再次校验身份和权限，不能相信前端隐藏按钮或路由拦截。
题目解析
这道题和路由懒加载题不同，它重点是权限模型和安全边界。
菜单、路由、按钮常来自同一份权限数据，但展示层和安全层职责不同。
复杂系统里要考虑权限刷新、用户切换、租户切换、资源级权限和 403 页面。
代码示例
下面展示了基于权限码过滤菜单的简化方式。
TSX
function filterMenus(menus: MenuItem[], permissions: string[]) {
return menus
.filter(menu => !menu.permission || permissions.includes(menu.permission))
.map(menu => ({
...menu,
children: menu.children
? filterMenus(menu.children, permissions)
: undefined
}))
}常见误区
- 只做菜单过滤，不做路由守卫，用户直接输入 URL 仍能进入页面。
- 只做前端权限，不做接口权限校验。
- 权限码散落在组件里，没有集中命名和配置，后续维护困难。