feat: 角色权限管理v3.0及错误处理优化
1. 角色权限管理升级: - 添加路由下展开式API权限管理功能 - 新增 getRoleRoutesWithPermissions 和 saveRoleApiPermissions API - 支持按路由展开/收起查看和勾选权限 - 过滤"所有权限"选项，只显示具体权限 2. 错误处理优化: - 403 无权限错误显示为"无权限访问该资源" - 修复评查点分组批量删除显示"成功删除 undefined 个分组"的问题 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -2,8 +2,8 @@
|
||||
|
||||
## 📋 文档信息
|
||||
|
||||
- **版本**: v2.0
|
||||
- **更新日期**: 2025-01-24
|
||||
- **版本**: v3.0
|
||||
- **更新日期**: 2025-11-26
|
||||
- **API基础URL**: `http://YOUR_HOST:8000`
|
||||
- **认证方式**: JWT Bearer Token
|
||||
|
||||
@@ -211,14 +211,29 @@ const wrongUsers = await getRoleUsers(3); // 数据库中不存在
|
||||
|
||||
**接口**: `POST /api/v3/rbac/roles`
|
||||
|
||||
**请求体**:
|
||||
**请求体参数**:
|
||||
|
||||
| 字段 | 类型 | 必填 | 验证规则 | 示例 |
|
||||
|------|------|------|---------|------|
|
||||
| role_key | string | ✅ | 必须以小写字母开头，只能包含小写字母、数字、下划线 | `department_leader` |
|
||||
| role_name | string | ✅ | 任意字符，建议不超过50字 | `部门负责人` |
|
||||
| description | string | ❌ | 角色描述 | `负责部门日常管理` |
|
||||
| data_scope | string | ❌ | 可选值：ALL/DEPT/SELF，默认SELF | `DEPT` |
|
||||
| metadata | object | ❌ | 自定义元数据 | `{}` |
|
||||
|
||||
**role_key 验证规则**:
|
||||
- ✅ 必须以**小写字母**开头：`a-z`
|
||||
- ✅ 只能包含：小写字母、数字、下划线
|
||||
- ✅ 正确示例：`admin_role`, `department_leader`, `role123`
|
||||
- ❌ 错误示例：`1231`（数字开头）, `Test_Role`（大写）, `admin-role`（连字符）
|
||||
|
||||
**请求示例**:
|
||||
```json
|
||||
{
|
||||
"role_key": "department_leader",
|
||||
"role_name": "部门负责人",
|
||||
"description": "负责部门日常管理",
|
||||
"data_scope": "DEPT",
|
||||
"metadata": {}
|
||||
"data_scope": "DEPT"
|
||||
}
|
||||
```
|
||||
|
||||
@@ -228,7 +243,7 @@ const wrongUsers = await getRoleUsers(3); // 数据库中不存在
|
||||
"code": 200,
|
||||
"message": "角色创建成功",
|
||||
"data": {
|
||||
"id": 6,
|
||||
"id": 53,
|
||||
"role_key": "department_leader",
|
||||
"role_name": "部门负责人",
|
||||
"data_scope": "DEPT",
|
||||
@@ -237,6 +252,22 @@ const wrongUsers = await getRoleUsers(3); // 数据库中不存在
|
||||
}
|
||||
```
|
||||
|
||||
**错误响应示例**:
|
||||
```json
|
||||
{
|
||||
"code": 4002,
|
||||
"msg": "参数验证错误",
|
||||
"data": [
|
||||
{
|
||||
"type": "value_error",
|
||||
"loc": ["body", "role_key"],
|
||||
"msg": "Value error, role_key只能包含小写字母、数字、下划线，且必须以字母开头",
|
||||
"input": "1231"
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### 1.3 获取角色的所有用户
|
||||
@@ -494,28 +525,113 @@ const wrongUsers = await getRoleUsers(3); // 数据库中不存在
|
||||
|
||||
---
|
||||
|
||||
### 3.2 获取角色可访问路由
|
||||
### 3.2 获取角色可访问路由（含API权限）⭐v3.0更新
|
||||
|
||||
**接口**: `GET /rbac/roles/{role_id}/routes`
|
||||
|
||||
**v3.0 重大变更**:
|
||||
- 返回格式从**扁平列表**改为**树形结构**
|
||||
- 每个路由节点新增 `permissions` 字段，包含该页面关联的所有API操作权限
|
||||
- 用于权限管理界面展示「页面 → API权限」的层级关系
|
||||
|
||||
**响应示例**:
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"msg": "success",
|
||||
"data": {
|
||||
"role_id": 2,
|
||||
"role_id": 1,
|
||||
"routes": [
|
||||
{"id": 1, "route_path": "/", "route_name": "Home", "route_title": "首页"},
|
||||
{"id": 11, "route_path": "/dashboard", "route_name": "Dashboard"}
|
||||
{
|
||||
"id": 31,
|
||||
"route_path": "/home",
|
||||
"route_name": "Home",
|
||||
"route_title": "系统概览",
|
||||
"parent_id": null,
|
||||
"icon": "ri-dashboard-line",
|
||||
"sort_order": 1,
|
||||
"is_hidden": false,
|
||||
"component": "views/Home.vue",
|
||||
"permissions": []
|
||||
},
|
||||
{
|
||||
"id": 41,
|
||||
"route_path": "/rules",
|
||||
"route_name": "Rules",
|
||||
"route_title": "评查规则库",
|
||||
"parent_id": null,
|
||||
"icon": "ri-book-3-line",
|
||||
"sort_order": 3,
|
||||
"is_hidden": false,
|
||||
"component": "views/rules/Index.vue",
|
||||
"permissions": [
|
||||
{
|
||||
"id": 28,
|
||||
"permission_key": "evaluation_group:list:read",
|
||||
"display_name": "查看评查点分组列表",
|
||||
"api_method": "GET",
|
||||
"api_path": "/api/v3/evaluation-point-groups"
|
||||
},
|
||||
{
|
||||
"id": 30,
|
||||
"permission_key": "evaluation_group:create:write",
|
||||
"display_name": "创建评查点分组",
|
||||
"api_method": "POST",
|
||||
"api_path": "/api/v3/evaluation-point-groups"
|
||||
},
|
||||
{
|
||||
"id": 35,
|
||||
"permission_key": "evaluation_point:list:read",
|
||||
"display_name": "查看评查点规则列表",
|
||||
"api_method": "GET",
|
||||
"api_path": "/api/v3/evaluation-points"
|
||||
}
|
||||
],
|
||||
"children": [
|
||||
{
|
||||
"id": 43,
|
||||
"route_path": "/rule-groups",
|
||||
"route_name": "RuleGroups",
|
||||
"route_title": "评查点分组",
|
||||
"parent_id": 41,
|
||||
"permissions": []
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
**字段说明**:
|
||||
|
||||
| 字段 | 类型 | 说明 |
|
||||
|------|------|------|
|
||||
| id | int | 路由ID |
|
||||
| route_path | string | 前端路由路径 |
|
||||
| route_name | string | 路由名称（用于Vue router name） |
|
||||
| route_title | string | 页面标题（用于菜单显示） |
|
||||
| parent_id | int/null | 父路由ID，null表示顶级路由 |
|
||||
| icon | string | 菜单图标 |
|
||||
| sort_order | int | 排序顺序 |
|
||||
| is_hidden | bool | 是否隐藏（不显示在侧边栏） |
|
||||
| component | string | Vue组件路径 |
|
||||
| permissions | array | **关联的API权限列表** |
|
||||
| children | array | 子路由列表（可选） |
|
||||
|
||||
**permissions 子字段说明**:
|
||||
|
||||
| 字段 | 类型 | 说明 |
|
||||
|------|------|------|
|
||||
| id | int | 权限ID |
|
||||
| permission_key | string | 权限标识（用于权限检查） |
|
||||
| display_name | string | 权限显示名称 |
|
||||
| api_method | string | HTTP方法（GET/POST/PUT/DELETE等） |
|
||||
| api_path | string | API路径 |
|
||||
|
||||
---
|
||||
|
||||
### 3.3 批量更新角色路由权限 ⭐新增
|
||||
### 3.3 批量更新角色路由权限
|
||||
|
||||
**接口**: `PUT /rbac/roles/{role_id}/routes`
|
||||
|
||||
@@ -697,6 +813,274 @@ const hasRBACAccess = routes.data.routes.some(r => r.route_path === '/rbac');
|
||||
- [ ] 处理401/403错误（跳转登录/权限提示）
|
||||
- [ ] 使用 `PUT /rbac/roles/{role_id}/routes` 实现路由权限分配
|
||||
- [ ] 处理 `total` 字段为0的情况（用数组长度代替）
|
||||
- [ ] **v3.0新增**: 适配新的路由权限接口（含permissions字段）
|
||||
|
||||
---
|
||||
|
||||
## 🎯 v3.0 前端修改思路说明
|
||||
|
||||
### 一、架构变更说明
|
||||
|
||||
**变更前（v2.0）**:
|
||||
```
|
||||
sys_routes 表：同时存储页面路由和API接口路由
|
||||
└── 侧边栏展示所有路由（包括API接口）❌ 不符合预期
|
||||
```
|
||||
|
||||
**变更后（v3.0）**:
|
||||
```
|
||||
sys_routes 表：仅存储页面路由（侧边栏菜单）
|
||||
permissions 表：存储API操作权限（通过 route_id 关联到页面）
|
||||
|
||||
页面路由
|
||||
├── 评查规则库 (/rules)
|
||||
│ ├── [权限] 查看评查点分组列表 (GET /api/v3/evaluation-point-groups)
|
||||
│ ├── [权限] 创建评查点分组 (POST /api/v3/evaluation-point-groups)
|
||||
│ ├── [权限] 查看评查点规则列表 (GET /api/v3/evaluation-points)
|
||||
│ └── ...
|
||||
└── 系统设置 (/settings)
|
||||
└── [子页面] 角色权限管理 (/role-permissions)
|
||||
```
|
||||
|
||||
### 二、权限管理界面修改思路
|
||||
|
||||
#### 2.1 数据结构适配
|
||||
|
||||
```typescript
|
||||
// 新的路由类型定义
|
||||
interface RouteWithPermissions {
|
||||
id: number;
|
||||
route_path: string;
|
||||
route_name: string;
|
||||
route_title: string;
|
||||
parent_id: number | null;
|
||||
icon: string;
|
||||
sort_order: number;
|
||||
is_hidden: boolean;
|
||||
component: string;
|
||||
permissions: Permission[]; // 新增：关联的API权限
|
||||
children?: RouteWithPermissions[];
|
||||
}
|
||||
|
||||
interface Permission {
|
||||
id: number;
|
||||
permission_key: string;
|
||||
display_name: string;
|
||||
api_method: string;
|
||||
api_path: string;
|
||||
}
|
||||
```
|
||||
|
||||
#### 2.2 权限分配界面布局建议
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ 角色权限管理 - 市级管理员 │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ☑ 系统概览 (/home) │
|
||||
│ │
|
||||
│ ☑ 评查规则库 (/rules) │
|
||||
│ ├─ ☑ 查看评查点分组列表 [GET] │
|
||||
│ ├─ ☑ 创建评查点分组 [POST] │
|
||||
│ ├─ ☑ 更新评查点分组 [PUT] │
|
||||
│ ├─ ☐ 删除评查点分组 [DELETE] ← 未勾选 │
|
||||
│ ├─ ☑ 查看评查点规则列表 [GET] │
|
||||
│ └─ ... │
|
||||
│ │
|
||||
│ ☐ 系统设置 (/settings) │
|
||||
│ └─ ☑ 角色权限管理 (/role-permissions) │
|
||||
│ │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
#### 2.3 前端组件实现示例
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<div class="role-permission-manager">
|
||||
<h3>角色权限管理 - {{ role.role_name }}</h3>
|
||||
|
||||
<!-- 路由权限树 -->
|
||||
<el-tree
|
||||
:data="routeTree"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:default-checked-keys="checkedRouteIds"
|
||||
:props="treeProps"
|
||||
@check="handleRouteCheck"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span class="route-node">
|
||||
<i :class="data.icon"></i>
|
||||
{{ data.route_title }}
|
||||
|
||||
<!-- 展示该路由关联的API权限 -->
|
||||
<div v-if="data.permissions?.length" class="permission-list">
|
||||
<el-checkbox-group v-model="checkedPermissions[data.id]">
|
||||
<el-checkbox
|
||||
v-for="perm in data.permissions"
|
||||
:key="perm.id"
|
||||
:label="perm.id"
|
||||
>
|
||||
<el-tag :type="getMethodTagType(perm.api_method)" size="small">
|
||||
{{ perm.api_method }}
|
||||
</el-tag>
|
||||
{{ perm.display_name }}
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
|
||||
<el-button type="primary" @click="savePermissions">保存权限</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
|
||||
const routeTree = ref([])
|
||||
const checkedRouteIds = ref([])
|
||||
const checkedPermissions = ref({}) // { routeId: [permissionId, ...] }
|
||||
|
||||
// 获取角色路由权限
|
||||
const fetchRoleRoutes = async (roleId) => {
|
||||
const res = await fetch(`/rbac/roles/${roleId}/routes`, {
|
||||
headers: { 'Authorization': `Bearer ${token}` }
|
||||
})
|
||||
const { data } = await res.json()
|
||||
routeTree.value = data.routes
|
||||
|
||||
// 初始化已选中的路由和权限
|
||||
initCheckedState(data.routes)
|
||||
}
|
||||
|
||||
// 根据HTTP方法返回标签类型
|
||||
const getMethodTagType = (method) => {
|
||||
const types = {
|
||||
'GET': 'success',
|
||||
'POST': 'primary',
|
||||
'PUT': 'warning',
|
||||
'DELETE': 'danger',
|
||||
'PATCH': 'info'
|
||||
}
|
||||
return types[method] || 'info'
|
||||
}
|
||||
|
||||
// 保存权限
|
||||
const savePermissions = async () => {
|
||||
// 1. 保存路由权限
|
||||
await fetch(`/rbac/roles/${roleId}/routes`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`,
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
route_ids: checkedRouteIds.value,
|
||||
permission: 'RW'
|
||||
})
|
||||
})
|
||||
|
||||
// 2. 保存功能权限（如需细粒度控制）
|
||||
// await saveRolePermissions(roleId, flattenPermissions())
|
||||
|
||||
ElMessage.success('权限保存成功')
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 三、权限检查逻辑修改
|
||||
|
||||
#### 3.1 按钮级权限控制
|
||||
|
||||
```javascript
|
||||
// 权限指令 v-permission
|
||||
app.directive('permission', {
|
||||
mounted(el, binding) {
|
||||
const { value } = binding // permission_key
|
||||
const userPermissions = store.state.user.permissions
|
||||
|
||||
if (!userPermissions.includes(value)) {
|
||||
el.parentNode?.removeChild(el)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 使用示例
|
||||
<el-button
|
||||
v-permission="'evaluation_group:create:write'"
|
||||
@click="handleCreate"
|
||||
>
|
||||
新建分组
|
||||
</el-button>
|
||||
```
|
||||
|
||||
#### 3.2 API请求权限校验
|
||||
|
||||
```javascript
|
||||
// 请求拦截器中添加权限检查
|
||||
axios.interceptors.request.use((config) => {
|
||||
const { method, url } = config
|
||||
const requiredPermission = findPermissionByApi(method, url)
|
||||
|
||||
if (requiredPermission && !hasPermission(requiredPermission)) {
|
||||
ElMessage.error('无权执行此操作')
|
||||
return Promise.reject(new Error('Permission denied'))
|
||||
}
|
||||
|
||||
return config
|
||||
})
|
||||
```
|
||||
|
||||
### 四、数据流程图
|
||||
|
||||
```
|
||||
┌──────────────┐ GET /rbac/roles/{id}/routes ┌──────────────┐
|
||||
│ 前端页面 │ ─────────────────────────────────→ │ 后端API │
|
||||
│ 权限管理 │ │ │
|
||||
└──────────────┘ └──────────────┘
|
||||
│ │
|
||||
│ ▼
|
||||
│ ┌──────────────┐
|
||||
│ │ 数据库查询 │
|
||||
│ │ sys_routes │
|
||||
│ │ permissions │
|
||||
│ │ role_route │
|
||||
│ └──────────────┘
|
||||
│ │
|
||||
│ 返回树形结构（含permissions） │
|
||||
│ ←──────────────────────────────────────────────────┘
|
||||
│
|
||||
▼
|
||||
┌──────────────────────────────────────────────────────────────────┐
|
||||
│ 渲染权限树 │
|
||||
│ ├── 页面路由节点（可展开） │
|
||||
│ │ └── API权限列表（checkbox） │
|
||||
│ └── 用户勾选/取消勾选 │
|
||||
└──────────────────────────────────────────────────────────────────┘
|
||||
│
|
||||
│ PUT /rbac/roles/{id}/routes (保存路由权限)
|
||||
│ POST /api/v3/rbac/roles/{id}/permissions (保存功能权限)
|
||||
▼
|
||||
┌──────────────┐
|
||||
│ 权限生效 │
|
||||
│ 用户刷新后 │
|
||||
│ 看到新权限 │
|
||||
└──────────────┘
|
||||
```
|
||||
|
||||
### 五、迁移检查清单
|
||||
|
||||
| 序号 | 检查项 | 状态 |
|
||||
|------|--------|------|
|
||||
| 1 | 更新 `GET /rbac/roles/{role_id}/routes` 接口调用，适配新的树形返回格式 | ⬜ |
|
||||
| 2 | 权限管理界面支持展示「页面路由 → API权限」层级结构 | ⬜ |
|
||||
| 3 | 添加 permissions 字段的 TypeScript 类型定义 | ⬜ |
|
||||
| 4 | 实现按钮级权限控制（使用 permission_key） | ⬜ |
|
||||
| 5 | 测试权限保存和刷新后生效 | ⬜ |
|
||||
|
||||
---
|
||||
|
||||
@@ -704,6 +1088,6 @@ const hasRBACAccess = routes.data.routes.some(r => r.route_path === '/rbac');
|
||||
|
||||
如有问题，请联系后端开发团队。
|
||||
|
||||
**文档版本**: v2.0
|
||||
**最后更新**: 2025-01-24
|
||||
**文档版本**: v3.0
|
||||
**最后更新**: 2025-11-26
|
||||
**维护者**: Backend Team
|
||||
|
||||
Reference in New Issue
Block a user