Files
login_task_web/docs/权限系统配置总结.md

194 lines
5.5 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 权限系统配置总结
## 概述
本系统采用基于角色的权限控制RBAC机制通过用户类型ADMIN/AGENT来控制用户的功能访问权限。
## 用户类型权限配置
### ADMIN管理员
- **权限范围**:拥有系统所有功能的访问权限
- **路由访问**:可以访问所有页面和路由
- **功能权限**
- 用户管理(创建、编辑、删除、启用/禁用)
- 游戏管理(查看、创建、编辑、删除)
- 订单管理(查看、管理)
- 报表分析(查看)
- 系统设置(管理)
### AGENT代理商
- **权限范围**:只能查看基础信息,无管理权限
- **路由访问**:只能访问部分页面
- **功能权限**
- 游戏查看
- 订单查看
- 报表查看
## 权限检查机制
### 1. 路由权限检查
```javascript
// 管理员可以访问所有路由
export function canAccessRoute(routeName) {
if (isAdmin()) return true
const requiredPermissions = ROUTE_PERMISSIONS[routeName] || []
if (requiredPermissions.length === 0) return true
return hasAnyPermission(requiredPermissions)
}
```
### 2. 功能权限检查
```javascript
// 检查单个权限
const canCreateUser = hasPermission('user:create')
// 检查多个权限(任一)
const canManageUsers = hasAnyPermission(['user:create', 'user:update', 'user:delete'])
// 检查多个权限(全部)
const canFullManage = hasAllPermissions(['user:create', 'user:update', 'user:delete'])
```
### 3. 权限指令使用
```vue
<!-- 单个权限 -->
<el-button v-permission="'user:create'">新增用户</el-button>
<!-- 多个权限OR逻辑 -->
<el-button v-permission="['user:create', 'user:update']">操作</el-button>
<!-- 多个权限AND逻辑 -->
<el-button v-permission="['user:create', 'user:update', 'AND']">操作</el-button>
```
## 权限配置详情
### 权限定义
```javascript
export const PERMISSIONS = {
// 用户管理权限
USER_MANAGE: 'user:manage',
USER_CREATE: 'user:create',
USER_UPDATE: 'user:update',
USER_DELETE: 'user:delete',
USER_VIEW: 'user:view',
// 游戏管理权限
GAME_MANAGE: 'game:manage',
GAME_CREATE: 'game:create',
GAME_UPDATE: 'game:update',
GAME_DELETE: 'game:delete',
GAME_VIEW: 'game:view',
// 订单管理权限
ORDER_MANAGE: 'order:manage',
ORDER_VIEW: 'order:view',
// 报表分析权限
REPORT_VIEW: 'report:view',
// 系统设置权限
SETTING_MANAGE: 'setting:manage',
}
```
### 角色权限映射
```javascript
export const ROLE_PERMISSIONS = {
ADMIN: [
// 管理员拥有所有权限
PERMISSIONS.USER_MANAGE, PERMISSIONS.USER_CREATE, PERMISSIONS.USER_UPDATE,
PERMISSIONS.USER_DELETE, PERMISSIONS.USER_VIEW,
PERMISSIONS.GAME_MANAGE, PERMISSIONS.GAME_CREATE, PERMISSIONS.GAME_UPDATE,
PERMISSIONS.GAME_DELETE, PERMISSIONS.GAME_VIEW,
PERMISSIONS.ORDER_MANAGE, PERMISSIONS.ORDER_VIEW,
PERMISSIONS.REPORT_VIEW, PERMISSIONS.SETTING_MANAGE,
],
AGENT: [
// 代理商只有查看权限
PERMISSIONS.GAME_VIEW, PERMISSIONS.ORDER_VIEW, PERMISSIONS.REPORT_VIEW,
]
}
```
### 路由权限映射
```javascript
export const ROUTE_PERMISSIONS = {
'Users': [PERMISSIONS.USER_VIEW],
'Games': [PERMISSIONS.GAME_VIEW],
'Orders': [PERMISSIONS.ORDER_VIEW],
'Reports': [PERMISSIONS.REPORT_VIEW],
'Settings': [PERMISSIONS.SETTING_MANAGE],
}
```
## 权限控制层级
### 1. 路由级权限控制
- 在路由守卫中检查用户是否有访问权限
- 管理员可以访问所有路由
- 代理商只能访问有权限的路由
- 无权限时自动跳转到仪表盘页面
### 2. 菜单级权限控制
- 根据用户权限动态显示/隐藏菜单项
- 代理商用户看不到"用户管理"和"系统设置"菜单
- 管理员可以看到所有菜单项
### 3. 页面级权限控制
- 在页面组件中检查用户权限
- 无权限时显示权限不足提示
- 提供友好的用户体验
### 4. 操作级权限控制
- 根据用户权限显示/隐藏操作按钮
- 代理商用户无法进行用户管理操作
- 使用权限指令控制按钮显示
## 安全注意事项
1. **前端权限控制仅用于用户体验**,不能作为安全依据
2. **后端必须进行权限验证**,确保数据安全
3. **敏感操作需要二次确认**,如删除用户
4. **权限变更需要重新登录**,确保权限生效
5. **定期审查权限配置**,避免权限泄露
## 测试验证
### 权限测试页面
- 访问 `/permission-test` 页面
- 查看当前用户的权限状态
- 测试各种权限检查功能
- 验证路由访问权限
### 测试建议
1. 使用不同用户类型登录,验证权限控制
2. 测试无权限访问时的跳转逻辑
3. 验证菜单和按钮的显示/隐藏
4. 测试后端接口的权限验证
5. 检查权限变更后的效果
## 扩展说明
### 添加新权限
1.`PERMISSIONS` 对象中添加新权限
2.`ROLE_PERMISSIONS` 中为不同角色分配权限
3.`ROUTE_PERMISSIONS` 中配置路由权限要求
4. 更新相关的前端权限检查逻辑
### 修改角色权限
1. 修改 `ROLE_PERMISSIONS` 中对应角色的权限数组
2. 更新相关的前端权限检查逻辑
3. 测试权限变更后的效果
## 总结
当前的权限系统配置确保了:
- **管理员拥有所有权限**,可以访问所有页面和功能
- **代理商只有查看权限**,无法进行管理操作
- **权限检查机制完善**,包括路由、菜单、页面、操作四个层级
- **用户体验友好**,无权限时提供清晰的提示和跳转
- **安全性保障**,前后端都有权限验证机制