前端启动成功

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

@@ -0,0 +1,127 @@
+# 校园新闻管理系统 - 权限控制系统使用说明
+
+## 系统概述
+
+该系统实现了基于角色和权限的动态路由和组件加载功能，根据用户登录后返回的菜单权限信息自动生成路由配置。
+
+## 核心功能
+
+### 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