07 · ENTERPRISE UIP113 MIN
动态路由、按钮权限与多角色界面
让界面准确反映当前能力，同时保持服务端授权为最终权威。
MENTAL MODELPERMISSION-AWARE UI
01Select Organization
→02Load Effective Capabilities
→03Render Routes / Actions
→04API Re-check
先把概念与边界说清楚
定义告诉你它是什么，边界告诉你它不负责什么；企业系统最常见的误解通常发生在两者混用时。
Dynamic Route
根据模块、功能开关和权限构建可访问导航与路由。
Button Permission
按动作能力决定显示、禁用或请求审批，并提供原因。
Multi-role UI
同一用户可能在多个组织或同时拥有多个角色，界面需显示当前上下文。
Data Permission
列表、计数、导出与详情都必须基于服务端返回的数据范围。
用户切换 Dealer 后仍看到旧菜单
权限只在登录时加载，组织切换后缓存未清理。
- 01
能力缓存键加入 membership/organization。
- 02
切换时取消旧请求并重建路由。
- 03
API 从当前认证上下文验证组织。
UI 与服务端上下文一致，不再残留上一个租户的入口和数据。
马上动手
- 设计 hidden、disabled、request-access 三种动作状态。
- 列出组织切换需要清理的缓存。
常见坑
- v-if 当安全控制
- 只保护页面不保护导出
- 角色名硬编码在组件里
05 · KNOWLEDGE CHECK按钮无权限时应该隐藏还是禁用？查看答案⌄
答案
取决于产品语义：无关能力可隐藏，需要解释或可申请的能力可禁用并说明原因；无论哪种服务端都必须拒绝越权请求。