添加 vue-router 依赖并配置路由，重构登录组件，完善 HTTP 请求拦截器以支持 token 刷新机制
This commit is contained in:
zyh
193
docs/权限系统配置总结.md
Normal file
193
docs/权限系统配置总结.md
Normal file
@@ -0,0 +1,193 @@
|
||||
# 权限系统配置总结
|
||||
|
||||
## 概述
|
||||
|
||||
本系统采用基于角色的权限控制（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. 测试权限变更后的效果
|
||||
|
||||
## 总结
|
||||
|
||||
当前的权限系统配置确保了：
|
||||
- **管理员拥有所有权限**，可以访问所有页面和功能
|
||||
- **代理商只有查看权限**，无法进行管理操作
|
||||
- **权限检查机制完善**，包括路由、菜单、页面、操作四个层级
|
||||
- **用户体验友好**，无权限时提供清晰的提示和跳转
|
||||
- **安全性保障**，前后端都有权限验证机制
|
||||
Reference in New Issue
Block a user