UI 层:菜单/按钮绑权限,列表 query 带 scope
前端拿到最终生效集计算出的生效集后,按 Module / Resource / Action / Scope 决定是否展示、是否可点。
最常见的约定:每个菜单项绑定它要求的最低权限——用户没有就隐藏(或置灰);
列表请求把 scope 当 query 参数带上,让后端知道该返回哪些行。
选不同角色,观察菜单实时变化。
当前用户的角色
隐藏 (hide)
置灰 (disable)
侧边菜单(每项标注它要求的最低权限)
点「文章列表」时实际发出的请求(scope 来自生效权限)
fetch('/api/...')。
所以真正的校验必须在 Server——
UI 做的判断 server 要独立再校验一遍。UI 权限是为了可用性,不是为了安全。
UI 层通常用到的判断
- 路由守卫:进某个页面前查
can('content:article:read'),没有就跳 403 / 重定向。 - 菜单生成:按生效集过滤菜单树,空目录(子项全无权限)自动收起。
- 按钮级:「删除」「审批」这类按钮按对应 action 显隐——尤其 high risk 的。
- scope 即 query:列表页把生效 scope 作为参数(如
?scope=group)发给后端,由后端按 scope 过滤数据。