添加 vue-router 依赖并配置路由，重构登录组件，完善 HTTP 请求拦截器以支持 token 刷新机制

docs/权限管理.md

@@ -0,0 +1,160 @@
+# 权限管理文档
+
+## 概述
+
+本系统采用基于角色的权限控制（RBAC）机制，通过用户类型（ADMIN/AGENT）来控制用户的功能访问权限。
+
+## 用户类型
+
+### ADMIN（管理员）
+- 拥有系统所有功能的访问权限
+- 可以管理用户账户（创建、编辑、删除、启用/禁用）
+- 可以管理游戏、订单、报表等所有模块
+- 可以访问系统设置
+
+### AGENT（代理商）
+- 只能查看游戏、订单、报表等基础信息
+- 无法访问用户管理功能
+- 无法访问系统设置
+- 主要用于业务操作，不具备管理权限
+
+## 权限定义
+
+### 用户管理权限
+- `user:view` - 查看用户列表
+- `user:create` - 创建用户
+- `user:update` - 编辑用户
+- `user:delete` - 删除用户
+- `user:manage` - 用户管理（包含所有用户相关权限）
+
+### 游戏管理权限
+- `game:view` - 查看游戏列表
+- `game:create` - 创建游戏
+- `game:update` - 编辑游戏
+- `game:delete` - 删除游戏
+- `game:manage` - 游戏管理（包含所有游戏相关权限）
+
+### 订单管理权限
+- `order:view` - 查看订单列表
+- `order:manage` - 订单管理
+
+### 报表分析权限
+- `report:view` - 查看报表
+
+### 系统设置权限
+- `setting:manage` - 系统设置管理
+
+## 角色权限映射
+
+```javascript
+const ROLE_PERMISSIONS = {
+  ADMIN: [
+    // 管理员拥有所有权限
+    'user:manage', 'user:create', 'user:update', 'user:delete', 'user:view',
+    'game:manage', 'game:create', 'game:update', 'game:delete', 'game:view',
+    'order:manage', 'order:view',
+    'report:view',
+    'setting:manage',
+  ],
+  AGENT: [
+    // 代理商只有查看权限
+    'game:view',
+    'order:view',
+    'report:view',
+  ]
+}
+```
+
+## 前端权限控制
+
+### 1. 路由权限控制
+- 在路由守卫中检查用户是否有访问权限
+- 无权限时自动跳转到仪表盘页面
+
+### 2. 菜单权限控制
+- 根据用户权限动态显示/隐藏菜单项
+- 代理商用户看不到"用户管理"和"系统设置"菜单
+
+### 3. 页面权限控制
+- 在页面组件中检查用户权限
+- 无权限时显示权限不足提示
+
+### 4. 操作权限控制
+- 根据用户权限显示/隐藏操作按钮
+- 代理商用户无法进行用户管理操作
+
+## 权限检查方法
+
+### 1. 权限工具函数
+```javascript
+import { hasPermission, hasAnyPermission, hasAllPermissions } from '@/utils/permission'
+
+// 检查单个权限
+const canCreateUser = hasPermission('user:create')
+
+// 检查多个权限（任一）
+const canManageUsers = hasAnyPermission(['user:create', 'user:update', 'user:delete'])
+
+// 检查多个权限（全部）
+const canFullManage = hasAllPermissions(['user:create', 'user:update', 'user:delete'])
+```
+
+### 2. 权限指令
+```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>
+
+<!-- 对象格式 -->
+<el-button v-permission="{ permission: ['user:create', 'user:update'], logic: 'OR' }">操作</el-button>
+```
+
+### 3. 计算属性
+```javascript
+const canViewUsers = computed(() => hasPermission('user:view'))
+const canCreateUser = computed(() => hasPermission('user:create'))
+const canEditUser = computed(() => hasPermission('user:update'))
+const canDeleteUser = computed(() => hasPermission('user:delete'))
+```
+
+## 后端权限控制
+
+### 1. 接口权限
+- 用户管理接口（`/api/admin/accounts`）只允许 ADMIN 用户访问
+- 代理商用户访问时返回 403 Forbidden 错误
+
+### 2. 数据权限
+- 代理商用户只能查看自己的相关数据
+- 管理员可以查看和管理所有数据
+
+## 权限配置
+
+### 添加新权限
+1. 在 `src/utils/permission.js` 中的 `PERMISSIONS` 对象中添加新权限
+2. 在 `ROLE_PERMISSIONS` 中为不同角色分配权限
+3. 在 `ROUTE_PERMISSIONS` 中配置路由权限要求
+
+### 修改角色权限
+1. 修改 `ROLE_PERMISSIONS` 中对应角色的权限数组
+2. 更新相关的前端权限检查逻辑
+
+## 安全注意事项
+
+1. **前端权限控制仅用于用户体验**，不能作为安全依据
+2. **后端必须进行权限验证**，确保数据安全
+3. **敏感操作需要二次确认**，如删除用户
+4. **权限变更需要重新登录**，确保权限生效
+5. **定期审查权限配置**，避免权限泄露
+
+## 测试建议
+
+1. 使用不同用户类型登录，验证权限控制
+2. 测试无权限访问时的跳转逻辑
+3. 验证菜单和按钮的显示/隐藏
+4. 测试后端接口的权限验证
+5. 检查权限变更后的效果