schoolNews/schoolNewsWeb/权限控制系统使用说明.md

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

系统概述

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

核心功能

1. 动态路由生成

• 根据菜单表中的 component 字段自动加载对应的Vue组件
• 支持目录和菜单两种类型的路由
• 自动构建菜单树结构

2. 权限控制

• 路由级权限控制
• 组件级权限控制
• 指令级权限控制

3. 用户认证

• JWT Token管理
• 自动刷新Token
• 登录状态维护

菜单表component字段说明

在菜单表中，component 字段用于指定路由对应的组件：

布局组件

• BasicLayout - 基础布局（侧边栏+顶部导航）
• BlankLayout - 空白布局（仅显示内容）
• PageLayout - 页面布局（带页面头部）

页面组件

• 可以使用相对路径：dashboard/Workplace
• 可以使用绝对路径：@/views/dashboard/Workplace.vue
• 系统会自动添加 @/views/ 前缀和 .vue 扩展名

权限指令使用

v-permission 指令

<!-- 单个权限 -->
<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 指令

<!-- 单个角色 -->
<div v-role="'admin'">管理员内容</div>

<!-- 多个角色 -->
<div v-role="['admin', 'moderator']">管理内容</div>

Composition API 使用

<script setup>
import { usePermission } from '@/directives/permission';

const { hasPermission, hasAnyPermission, hasRole } = usePermission();

// 检查权限
if (hasPermission('user:create')) {
  // 有权限的逻辑
}

// 检查角色
if (hasRole('admin')) {
  // 管理员逻辑
}
</script>

菜单配置示例

-- 目录类型菜单
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