128 lines
3.3 KiB
Markdown
128 lines
3.3 KiB
Markdown
# 校园新闻管理系统 - 权限控制系统使用说明
|
||
|
||
## 系统概述
|
||
|
||
该系统实现了基于角色和权限的动态路由和组件加载功能，根据用户登录后返回的菜单权限信息自动生成路由配置。
|
||
|
||
## 核心功能
|
||
|
||
### 1. 动态路由生成
|
||
- 根据菜单表中的 `component` 字段自动加载对应的Vue组件
|
||
- 支持目录和菜单两种类型的路由
|
||
- 自动构建菜单树结构
|
||
|
||
### 2. 权限控制
|
||
- 路由级权限控制
|
||
- 组件级权限控制
|
||
- 指令级权限控制
|
||
|
||
### 3. 用户认证
|
||
- JWT Token管理
|
||
- 自动刷新Token
|
||
- 登录状态维护
|
||
|
||
## 菜单表component字段说明
|
||
|
||
在菜单表中，`component` 字段用于指定路由对应的组件：
|
||
|
||
### 布局组件
|
||
- `BasicLayout` - 基础布局（侧边栏+顶部导航）
|
||
- `BlankLayout` - 空白布局（仅显示内容）
|
||
- `PageLayout` - 页面布局（带页面头部）
|
||
|
||
### 页面组件
|
||
- 可以使用相对路径：`dashboard/Workplace`
|
||
- 可以使用绝对路径：`@/views/dashboard/Workplace.vue`
|
||
- 系统会自动添加 `@/views/` 前缀和 `.vue` 扩展名
|
||
|
||
## 权限指令使用
|
||
|
||
### v-permission 指令
|
||
```vue
|
||
<!-- 单个权限 -->
|
||
<el-button v-permission="'user:create'">新增用户</el-button>
|
||
|
||
<!-- 多个权限（任意一个） -->
|
||
<el-button v-permission="['user:create', 'user:edit']">操作</el-button>
|
||
|
||
<!-- 多个权限（必须全部拥有） -->
|
||
<el-button v-permission.all="['user:create', 'user:edit']">操作</el-button>
|
||
```
|
||
|
||
### v-role 指令
|
||
```vue
|
||
<!-- 单个角色 -->
|
||
<div v-role="'admin'">管理员内容</div>
|
||
|
||
<!-- 多个角色 -->
|
||
<div v-role="['admin', 'moderator']">管理内容</div>
|
||
```
|
||
|
||
## Composition API 使用
|
||
|
||
```vue
|
||
<script setup>
|
||
import { usePermission } from '@/directives/permission';
|
||
|
||
const { hasPermission, hasAnyPermission, hasRole } = usePermission();
|
||
|
||
// 检查权限
|
||
if (hasPermission('user:create')) {
|
||
// 有权限的逻辑
|
||
}
|
||
|
||
// 检查角色
|
||
if (hasRole('admin')) {
|
||
// 管理员逻辑
|
||
}
|
||
</script>
|
||
```
|
||
|
||
## 菜单配置示例
|
||
|
||
```sql
|
||
-- 目录类型菜单
|
||
INSERT INTO tb_sys_menu (menuID, parentID, name, url, component, type, orderNum)
|
||
VALUES ('system', '0', '系统管理', '/system', 'BasicLayout', 0, 1);
|
||
|
||
-- 菜单类型
|
||
INSERT INTO tb_sys_menu (menuID, parentID, name, url, component, type, orderNum)
|
||
VALUES ('system-user', 'system', '用户管理', '/system/user', 'system/User', 1, 1);
|
||
```
|
||
|
||
## 登录流程
|
||
|
||
1. 用户登录成功后，系统获取 `LoginDomain` 对象
|
||
2. 从 `LoginDomain` 中提取菜单权限信息
|
||
3. 根据菜单信息动态生成路由配置
|
||
4. 将生成的路由添加到Vue Router中
|
||
5. 用户可以访问有权限的页面
|
||
|
||
## 路由守卫
|
||
|
||
系统自动设置了路由守卫：
|
||
- 检查用户登录状态
|
||
- 验证页面访问权限
|
||
- 自动重定向到登录页或错误页
|
||
|
||
## 错误处理
|
||
|
||
- 404页面：路由不存在
|
||
- 403页面：无权限访问
|
||
- 500页面：服务器错误
|
||
- 组件加载失败时显示错误信息
|
||
|
||
## 开发建议
|
||
|
||
1. 菜单表中的 `component` 字段应该对应实际存在的组件文件
|
||
2. 权限控制粒度可以到按钮级别
|
||
3. 合理使用布局组件来保持UI一致性
|
||
4. 定期检查和更新权限配置
|
||
|
||
## 注意事项
|
||
|
||
- 确保菜单表中的URL路径与实际路由匹配
|
||
- 组件文件名应该与 `component` 字段对应
|
||
- 权限代码应该与后端保持一致
|
||
- 测试时注意清除本地存储的Token
|