# 菜单由接口下发时，前端权限怎么守

后台菜单的分组、层级、外链与打开方式，配合权限码过滤菜单、守卫路由与按钮。

> Runlume 提供平台能力、独立业务应用与专业服务，支持按需组合。功能、额度与交付范围由所选套餐或服务约定确定；业务应用可独立选用，跨应用协作遵循接入配置与授权边界。

原始页面: https://runlume.app/blog/admin-design-menu-and-permissions

开发者指南 · 动态菜单 / 权限 / 应用接入

发布：2026-09-17 · 作者：Runlume 团队

后台菜单常常由服务端下发：不同角色看到的入口不同，新增页面也不必重新发版。前端要做的不是“照着渲染”，而是把菜单、路由与按钮三处的权限收紧到同一套规则。

## 菜单契约

菜单按“分组 + 条目”下发。条目里带路径、文案（或文案 key）、图标、所属分组、排序、隐藏标记、权限码与子菜单；分组决定侧栏顺序，层级上限四层，避免接口返回的病态嵌套把侧栏撑爆。

外链条目单独声明地址与打开方式：新窗口、当前窗口或内嵌。内嵌只对允许被内嵌的站点有效——对方发了 `X-Frame-Options: DENY` 时，嵌进去只会是空白。

容错也要放在前端：异常路径、未知图标、超出层级的子项都会被规整，并留下可读的警告清单。接真实接口时先看这份清单，而不是等用户报错。

## 路由只认已注册的页面

动态路由的组件来自本地注册表：接口只能引用已注册的页面，不能靠下发的数据新增代码。未登录或没有权限的地址会落到登录页或 403，而不是白屏。

## 三处一起生效

- 菜单：按权限码过滤可见条目，没有权限的入口不显示。
- 路由：直接敲 URL 进来的同样会被拦下，落到 403。
- 按钮：`<Can permission="customer:create">` 控制新建、导出这类操作，无权限时给出禁用态而不是静默失败。

权限码支持 `*`（全部）、`module:*`（模块内全部）与精确匹配三种写法，角色差异可以用一份清单表达。文档站的「动态菜单与权限」专题列出了完整契约；在线演示里可以用两个测试账号对比：同一个地址，管理员能看到操作日志，测试账号落 403。

## 相关页面

- [平台能力](https://runlume.app/platform)
- [业务应用](https://runlume.app/apps)
- [开发者](https://runlume.app/developers)
- [关于 Runlume](https://runlume.app/about)