权限管理
本页面向“已经能跑通项目”的开发者，用一张图讲清 权限数据从后端到前端 的完整链 路，并补齐落地细节（路由权限、按钮权限、角色权限、数据权限的边界）。
1. 权限体系总览
你需要明确：
- 前端做的是“体验层权限”（隐藏菜单、禁用按钮、拦截路由）。
- 后端做的是“安全层权限”（接口鉴权、数据权限过滤）。
- 两者必须使用同一套权限点命名，才能做到一致。
2. 权限类型与边界
2.1 路由权限（页面级）
- 目标：用户只能访问被授权的页面。
- 典型实现：登录后拉取后端菜单/路由 → 转换成前端路由 → 动态注册。
关键步骤（高层链路）：
2.2 按钮权限（操作级）
- 目标：同一页面内，不同角色看到不同操作按钮。
- 推荐做法：统一以权限点控制，避免仅靠角色名判断。
vue
<template>
<el-button v-hasPerm="['sys:user:add']">新增</el-button>
<el-button v-hasPerm="['sys:user:delete']">删除</el-button>
</template>1
2
3
4
2
3
4
2.3 角色权限（RBAC）
- 角色是权限集合的“分发单位”。
- 业务上应避免直接给用户堆权限点，应通过角色分配。
2.4 数据权限（范围级）
- 目标：同样一个查询接口，不同用户只能看到“自己的范围”。
- 数据权限必须在后端生效，前端只负责展示/选择。
建议你阅读：
3. 权限点命名与对齐建议
- 权限点必须稳定、可追踪（例如
sys:user:add）。 - 菜单/按钮/接口尽量同源：
- “按钮显示”与“接口可调用”应一致。
- 避免出现：按钮隐藏但接口仍可被调用。
4. 常见问题排查
- 路由生成了但页面进不去：检查路由
name是否唯一；检查后端返回的component映射是否存在。 - 按钮权限不生效：确认
v-hasPerm使用的权限点在用户权限集合中；确认权限集合更 新后是否需要重新登录/刷新权限缓存。 - 侧边栏菜单不显示：检查菜单类型（目录/菜单/按钮）；检查
hidden/visible配置 。