# 校园新闻管理系统 - 权限控制系统使用说明

## 系统概述

该系统实现了基于角色和权限的动态路由和组件加载功能，根据用户登录后返回的菜单权限信息自动生成路由配置。

## 核心功能

### 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