企业级Vue权限管理模型以RBAC为基础，分层实现路由权限（动态路由+守卫校验）、操作权限（自定义指令v-has-permi）、状态同步（Pinia统一管理+Token拦截）及菜单动态渲染（与路由语义一致），前后端协同保障安全与体验。
构建一套企业级 Vue 权限管理模型，关键不在堆砌功能，而在于分层清晰、职责明确、前后端协同。核心是围绕「谁能看到什么页面」「谁能在页面上做什么操作」两个问题展开，用 RBAC（基于角色的访问控制）模型打底，再叠加细粒度控制能力。
路由权限：从登录到菜单的可见性控制
这是用户进入系统的第一个关卡。不能只靠前端拦截，必须配合后端返回的权限标识做动态处理：
- 登录成功后，后端返回用户角色（如 admin、finance）和/或具体权限码（如 system:user:list）
- 前端根据这些信息，过滤预定义的完整路由表，或直接接收后端下发的精简路由结构
- 所有受控路由需在 meta 中声明所需角色或权限，例如：
meta: { roles: ['admin'], permission: 'system:menu:view' } - 全局导航守卫 router.beforeEach 中统一判断：未登录跳转登录页；无对应权限跳转 403 页；权限匹配则放行
按钮与操作权限：细化到页面内的交互元素
菜单可见不等于功能可用。一个用户能进「用户管理」页，不代表他能删用户。这类控制需落到 DOM 层：
- 封装自定义指令（如 v-has-permi），在按钮、链接等元素上直接绑定权限码：
<el-button v-has-permi="'system:user:delete'">删除</el-button> - 指令内部读取 Pinia 中存储的用户权限列表，比对后决定是否渲染或禁用该元素
- 对于复杂逻辑（如「仅可编辑自己创建的数据」），需结合后端返回的数据字段 + 前端状态判断，不能仅依赖静态权限码
状态与通信：权限数据的可信来源与同步
权限不是一次性的快照，它需要随用户行为实时响应：
立即学习“前端免费学习笔记（深入）”；
- 使用 Pinia 统一管理用户角色、权限列表、Token 等认证态，避免分散在多个组件中
- 登录、切换角色、修改权限等操作后，必须主动更新 Pinia 中的状态，并触发路由重载或局部刷新
- Axios 请求拦截器中自动注入 Token；响应拦截器中捕获 401（Token 过期）和 403（权限不足），分别处理跳转或提示
- 敏感操作（如提交、删除）的 API 调用前，建议再次校验权限——前端控制是体验优化，后端校验才是安全底线
菜单与界面：动态渲染与用户体验平衡
左侧菜单不是静态配置，而是权限的可视化映射：
- 菜单数据应与路由结构保持语义一致，同样通过 meta.roles 或 meta.permission 控制显隐
- 支持多级嵌套菜单，但避免过度深层（一般不超过三级），影响可维护性
- 提供「无权限提示」兜底方案，比如点击不可见菜单时显示友好提示，而非静默失败
- 若采用后端返回菜单结构，注意处理组件路径映射（如后端返回
component: "user/list"，前端需正确 resolve 为异步组件）
