UI 层 · 菜单绑最低权限

UI 层：菜单／按钮绑权限，列表 query 带 scope

前端拿到最终生效集算出的生效集后，按 Module / Resource / Action / Scope 决定是否展示、是否可点。最常见的约定：每个菜单项绑定它要求的最低权限——用户没有就隐藏（或置灰）；列表请求把 scope 当 query 参数带上，让后端知道该返回哪些行。

1 · 菜单树按生效集显隐

隐藏与置灰是两种取舍：隐藏让界面更干净，置灰让用户知道「功能存在，只是当前无权」，便于申请。空目录——子项全无权限的父级——在隐藏模式下自动收起。

图 1-1 · 菜单树随角色生效集显隐，以及列表请求携带的 scope 参数。可勾选角色并切换无权限时的处理方式，观察菜单项与请求 URL 的变化。

警示 · UI 上的隐藏／置灰只是体验，不是安全。隐藏菜单、置灰按钮，防住的只是误操作。任何人都能打开 devtools、直接 fetch('/api/...')。所以真正的校验必须在 Server——UI 做的判断 server 要独立再校验一遍，被绕过之后会发生什么见 Server 层 §3。

2 · UI 层通常用到的判断

**路由守卫：**进某个页面前查 can('content:article:read')，没有就跳 403 / 重定向。
**菜单生成：**按生效集过滤菜单树，空目录（子项全无权限）自动收起。
按钮级：「删除」「审批」这类按钮按对应 action 显隐——尤其 high risk 的。
**scope 即 query：**列表页把生效 scope 作为参数（如 ?scope=group）发给后端，由后端按 scope 过滤数据。