权限体系
youlai-admin 的权限系统采用三层架构：动态路由（页面级）→ 角色 RBAC（功能级）→ 数据权限（数据级）。
权限模型
┌─────────────────────────────────────────────────────────────┐
│ 用户（User） │
│ │ │
│ ▼ │
│ 角色（Role） │
│ │ │
│ ┌────────────┴────────────┐ │
│ ▼ ▼ │
│ 菜单（Menu） 权限（Permission） │
│ │ │ │
│ ▼ ▼ │
│ 页面路由 按钮/操作权限 │
└─────────────────────────────────────────────────────────────┘1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
三层权限
1. 动态路由权限
用户登录后，根据角色获取可访问的菜单，动态生成路由。
typescript
// 路由守卫中生成动态路由
const dynamicRoutes = await permissionStore.generateRoutes()
dynamicRoutes.forEach(route => router.addRoute(route))1
2
3
2
3
2. 按钮/功能权限
通过权限标识控制按钮显隐：
vue
<!-- 指令方式 -->
<el-button v-hasPerm="['sys:user:add']">新增</el-button>
<!-- 函数方式 -->
<script setup>
if (hasPerm(['sys:user:add'])) {
// 有权限
}
</script>1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
3. 数据权限
控制用户能访问的数据范围：
| 数据范围 | 说明 |
|---|---|
| 全部数据 | 可见所有数据 |
| 本部门数据 | 仅可见本部门 |
| 本部门及以下 | 可见本部门及子部门 |
| 仅本人数据 | 仅可见自己创建的 |
权限标识规范
模块:资源:操作
示例：
sys:user:list 用户列表
sys:user:add 新增用户
sys:user:edit 编辑用户
sys:user:delete 删除用户
sys:user:export 导出用户1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
后端实现差异
| 后端 | 权限框架 | 数据权限 |
|---|---|---|
| Java | Spring Security | ✅ MyBatis-Plus 拦截 |
| NestJS | JWT Guard | ❌ 需自行实现 |
| Go | Casbin | ❌ 需自行实现 |
源码位置
| 模块 | 前端路径 |
|---|---|
| 路由守卫 | src/router/guards/permission.ts |
| 权限 Store | src/store/modules/permission.ts |
| 权限指令 | src/directives/permission/ |
| 权限函数 | src/utils/auth.ts |