# user-manage **Repository Path**: dengkegit/user-manage ## Basic Information - **Project Name**: user-manage - **Description**: 一个基于 Vue3 + Element Plus 和 Spring Boot + MyBatis-Plus 的前后端分离用户管理系统。 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-03-20 - **Last Updated**: 2026-07-30 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 用户管理系统 一个基于 Vue3 + Element Plus 和 Spring Boot + MyBatis-Plus 的前后端分离用户管理系统,提供完整的 RBAC 权限管理、部门团队管理、登录审计等功能。 ## 🌟 核心特性 - 🔐 **RBAC 权限管理** - 基于角色的访问控制,支持多角色多权限 - 👥 **部门团队管理** - 树形部门结构,团队及成员管理 - 📊 **登录审计** - 完整的登录日志记录和操作审计 - 🛡️ **安全防护** - JWT 双 Token 机制、Cookie 安全存储、Token 黑名单 - 🎯 **工号认证** - 支持工号登录,唯一身份标识 - 📱 **响应式设计** - 适配桌面端和移动端 ## 技术栈 ### 前端 - **Vue 3** - 渐进式 JavaScript 框架 - **Element Plus** - Vue 3 组件库 - **Vue Router** - 路由管理 - **Pinia** - 状态管理(替代 Vuex) - **Axios** - HTTP 请求库 - **Vite** - 下一代前端构建工具 ### 后端 - **Java 8** - 开发语言 - **Spring Boot 2.7.18** - 核心框架 - **MyBatis-Plus 3.5.3.1** - ORM 持久层框架 - **MySQL 8.0** - 关系型数据库 - **JWT (io.jsonwebtoken)** - Token 认证 - **Hutool 5.8.16** - Java 工具类库 - **Lombok** - 简化 Java 代码 ## 项目结构 ``` user-manage/ ├── database/ # 数据库相关 │ ├── init.sql # 数据库初始化脚本(完整版) │ ├── migrate_*.sql # 数据库迁移脚本 ├── user-manage-backend/ # 后端工程 │ ├── src/main/java/com/usermanage/ │ │ ├── annotation/ # 自定义注解 │ │ ├── aspect/ # AOP 切面(日志、审计) │ │ ├── common/ # 公共类(Result、PageResult) │ │ ├── config/ # 配置类(Jackson、Web、CORS 等) │ │ ├── controller/ # 控制器 │ │ │ ├── UserController # 用户管理 │ │ │ ├── RoleController # 角色管理 │ │ │ ├── DepartmentController # 部门管理 │ │ │ ├── TeamController # 团队管理 │ │ │ ├── LoginLogController # 登录日志 │ │ │ ├── OperationAuditController # 操作审计 │ │ │ └── KickUserController # 强制下线 │ │ ├── dto/ # 数据传输对象 │ │ ├── entity/ # 实体类 │ │ ├── interceptor/ # 拦截器(JWT 认证) │ │ ├── mapper/ # MyBatis Mapper 接口 │ │ ├── service/ # 服务层 │ │ ├── util/ # 工具类(JwtUtil、CookieUtil) │ │ └── UserManageBackendApplication.java │ ├── src/main/resources/ │ │ ├── application.yml # 配置文件 │ │ └── mapper/ # MyBatis XML │ └── pom.xml └── user-manage-frontend/ # 前端工程 ├── src/ │ ├── api/ # API 接口封装 │ │ ├── user.js # 用户相关 API │ │ ├── role.js # 角色相关 API │ │ ├── department.js # 部门相关 API │ │ ├── team.js # 团队相关 API │ │ └── login.js # 登录日志 API │ ├── layout/ # 布局组件 │ ├── router/ # 路由配置 │ ├── stores/ # Pinia 状态管理 │ │ └── user.js # 用户状态管理 │ ├── utils/ # 工具函数 │ │ ├── cookie.js # Cookie 操作 │ │ └── request.js # Axios 封装 │ ├── views/ # 页面视图 │ │ ├── Login.vue # 登录页 │ │ ├── Home.vue # 首页 │ │ ├── user/ # 用户管理 │ │ ├── role/ # 角色管理 │ │ ├── permission/ # 权限配置 │ │ ├── department/ # 部门管理 │ │ ├── team/ # 团队管理 │ │ ├── audit/ # 操作审计 │ │ ├── kick/ # 强制下线 │ │ └── login/ # 登录日志 │ ├── App.vue │ └── main.js ├── index.html ├── package.json └── vite.config.js ``` ## 功能特性 ### 后端功能 - ✅ **用户认证** - JWT Token + Refresh Token 双 Token 机制 - ✅ **Cookie 安全存储** - HttpOnly、Secure、SameSite 多重防护 - ✅ **Token 黑名单** - 支持用户退出和强制下线 - ✅ **RBAC 权限控制** - 基于角色的访问控制 - ✅ **部门管理** - 树形部门结构,支持多级部门 - ✅ **团队管理** - 团队及成员管理,支持管理员和员工角色 - ✅ **登录日志** - 完整记录用户登录信息(IP、时间、结果) - ✅ **操作审计** - 记录所有关键操作日志 - ✅ **工号认证** - 支持工号登录,全局唯一标识 - ✅ **数据分页** - MyBatis-Plus 分页插件 - ✅ **逻辑删除** - 数据软删除,支持恢复 ### 前端功能 - ✅ **智能路由** - 根据用户角色动态生成可访问路由 - ✅ **权限按钮** - 基于权限控制按钮显示/隐藏 - ✅ **自动刷新 Token** - Token 过期自动续期 - ✅ **多标签页支持** - Cookie+localStorage双重存储 - ✅ **响应式布局** - 适配不同屏幕尺寸 - ✅ **表单验证** - 完善的表单验证和错误提示 - ✅ **消息通知** - Element Plus Message 全局提示 ### 角色权限体系 #### 角色类型 - **管理员(ADMIN)** - 拥有所有权限,可访问所有功能模块 - **普通用户(USER)** - 基础权限,只能访问首页 #### 权限粒度 - **菜单级权限** - 控制左侧菜单的显示/隐藏 - **按钮级权限** - 控制页面内按钮的显示/隐藏 - **API 级权限** - 后端接口级别的权限控制 #### 权限配置 - 支持自定义角色 - 支持为角色分配菜单权限 - 支持为用户分配多个角色 ## 快速开始 ### 方式一:Docker 部署(推荐) **前提条件**: Docker 20.10+ 和 Docker Compose 2.0+ ```bash # 1. 配置环境变量 cp .env.example .env # 2. 一键启动 docker-compose up -d # 3. 查看日志 docker-compose logs -f # 4. 访问系统 # 前端:http://localhost # 后端:http://localhost:8080 ``` **测试账号**: - 工号:`ADMIN-001` - 密码:`123456` **详细文档**: [DOCKER_DEPLOYMENT_GUIDE.md](DOCKER_DEPLOYMENT_GUIDE.md) ### 方式二:本地开发环境 ### 1. 数据库初始化 #### 方式一:全新安装(推荐) ```bash # 登录 MySQL mysql -u root -p # 执行初始化脚本(包含所有功能) source database/init.sql; ``` **说明**: `init.sql` 包含完整的数据库表结构和测试数据,适合首次安装。 #### 方式二:已有系统升级 如果已经执行过旧版本的初始化脚本,只需执行迁移脚本: ```bash # 登录 MySQL mysql -u root -p # 根据需要执行相应的迁移脚本 source database/migrate_login_log.sql; # 登录日志功能 source database/migrate_audit_log.sql; # 操作审计功能 source database/migrate_kick_user.sql; # 强制下线功能 ``` ### 2. 启动后端 ```bash cd user-manage-backend # 使用 Maven 运行(开发环境) mvn spring-boot:run # 或者先打包再运行(生产环境) mvn clean package java -jar target/user-manage-backend-1.0.0.jar ``` **启动成功标志**: `Started UserManageBackendApplication in X.XXX seconds` **服务地址**: http://localhost:8080 **配置文件**: `src/main/resources/application.yml` ### 3. 启动前端 ```bash cd user-manage-frontend # 安装依赖(首次运行) npm install # 启动开发服务器 npm run dev # 生产环境打包 npm run build ``` **启动成功标志**: `Local: http://localhost:3000/` **服务地址**: http://localhost:3000 **代理配置**: `vite.config.js` 中已配置 API 代理,解决跨域问题 ## 测试账号 ### 管理员账号 - **用户名**: 管理员 - **工号**: `ADMIN-001` (用于登录) - **密码**: `123456` - **权限**: 可访问所有页面和功能模块 - **角色**: ADMIN ### 普通用户账号 - **用户名**: 普通用户 - **工号**: `USER-001` (用于登录) - **密码**: `123456` - **权限**: 只能访问首页 - **角色**: USER ### 登录说明 **仅支持工号登录**: - 登录时使用 **工号**(不是用户名) - 工号全局唯一,格式:`XXX-NNN`(字母 + 数字) - 密码使用 BCrypt 加密存储 ## API 接口文档 ### 认证相关 - `POST /api/user/login` - 用户登录(返回 Token + RefreshToken) - `POST /api/user/refresh-token` - 刷新 Token - `POST /api/user/logout` - 退出登录(加入黑名单) ### 用户管理 - `GET /api/user/info` - 获取当前登录用户信息 - `GET /api/user/list` - 分页查询用户列表 - `GET /api/user/{id}` - 根据 ID 获取用户详情 - `POST /api/user` - 新增用户 - `PUT /api/user` - 修改用户信息 - `DELETE /api/user/{id}` - 删除用户 ### 角色管理 - `GET /api/role/list` - 分页查询角色列表 - `GET /api/role/{id}` - 根据 ID 获取角色 - `POST /api/role` - 新增角色 - `PUT /api/role` - 修改角色信息 - `DELETE /api/role/{id}` - 删除角色 - `GET /api/role/menu/{roleId}` - 获取角色菜单权限 - `POST /api/role/menu` - 分配角色菜单权限 ### 部门管理 - `GET /api/department/list` - 分页查询部门列表 - `GET /api/department/tree-list` - 获取部门树形结构 - `GET /api/department/{id}` - 根据 ID 获取部门 - `POST /api/department` - 新增部门 - `PUT /api/department` - 修改部门信息 - `DELETE /api/department/{id}` - 删除部门 ### 团队管理 - `GET /api/team/list` - 分页查询团队列表 - `GET /api/team/{id}` - 根据 ID 获取团队 - `POST /api/team` - 新增团队 - `PUT /api/team` - 修改团队信息 - `DELETE /api/team/{id}` - 删除团队 - `GET /api/team/{teamId}/members` - 获取团队成员列表 - `POST /api/team/{teamId}/members` - 添加团队成员 - `DELETE /api/team/{teamId}/members/{employeeNo}` - 移除团队成员 ### 登录日志 - `GET /api/login-log/list` - 分页查询登录日志列表 ### 操作审计 - `GET /api/operation-log/list` - 分页查询操作日志列表 ### 强制下线 - `POST /api/kick-user/{employeeNo}` - 强制用户下线 **请求格式**: JSON **响应格式**: `{ code: number, message: string, data: any }` **认证方式**: Header 中携带 `Authorization: Bearer ` ## 数据库表结构 ### 核心业务表 #### sys_user - 用户表 - `id` - 用户 ID(主键) - `username` - 用户名(可重复,用于显示) - `employee_no` - 工号(全局唯一,用于登录) - `dept_id` - 所属部门 ID(外键) - `password` - 密码(BCrypt 加密) - `email` - 邮箱 - `phone` - 手机号 - `status` - 状态(0=禁用,1=启用) - `create_time` - 创建时间 - `update_time` - 更新时间 - `deleted` - 逻辑删除标识 #### sys_role - 角色表 - `id` - 角色 ID - `role_name` - 角色名称 - `role_code` - 角色编码(如 ADMIN、USER) - `description` - 角色描述 - `create_time` - 创建时间 - `update_time` - 更新时间 - `deleted` - 逻辑删除标识 #### sys_menu - 菜单权限表 - `id` - 菜单 ID - `parent_id` - 父菜单 ID - `menu_name` - 菜单名称 - `menu_path` - 菜单路径 - `menu_component` - 组件路径 - `menu_icon` - 菜单图标 - `menu_type` - 菜单类型(1=目录,2=菜单,3=按钮) - `permission` - 权限标识(如 user:view, user:add) - `sort_order` - 排序 - `create_time` - 创建时间 - `update_time` - 更新时间 - `deleted` - 逻辑删除标识 ### 关联表 #### sys_user_role - 用户角色关联表 - `id` - ID - `user_id` - 用户 ID - `role_id` - 角色 ID #### sys_role_menu - 角色菜单关联表 - `id` - ID - `role_id` - 角色 ID - `menu_id` - 菜单 ID ### 扩展功能表 #### sys_department - 部门表 - `id` - 部门 ID - `dept_name` - 部门名称 - `dept_type` - 部门类型(1=研发部门,2=管理部门) - `parent_id` - 上级部门 ID - `create_time` - 创建时间 - `update_time` - 更新时间 - `deleted` - 逻辑删除标识 #### sys_team - 团队表 - `id` - 团队 ID - `team_name` - 团队名称 - `leader_employee_no` - 团队负责人工号 - `create_time` - 创建时间 - `update_time` - 更新时间 - `deleted` - 逻辑删除标识 #### sys_team_member - 团队成员表 - `id` - ID - `team_id` - 团队 ID - `employee_no` - 成员工号 - `member_type` - 成员类型(1=管理员,2=员工) - `join_time` - 加入时间 - `create_time` - 创建时间 - `update_time` - 更新时间 - `deleted` - 逻辑删除标识 ### 审计日志表 #### sys_login_log - 登录日志表 - `id` - ID - `employee_no` - 登录工号 - `login_time` - 登录时间 - `ip_address` - 登录 IP 地址 - `login_result` - 登录结果(0=失败,1=成功) - `fail_reason` - 失败原因 - `user_agent` - 浏览器标识 - `create_time` - 创建时间 #### sys_operation_log - 操作日志表 - `id` - ID - `module` - 操作模块 - `operation_type` - 操作类型 - `operator` - 操作人 - `operation_time` - 操作时间 - `execute_time` - 执行时长 (ms) - `request_params` - 请求参数 - `response_status` - 响应状态 - `error_message` - 错误信息 - `ip_address` - 操作 IP - `browser` - 浏览器信息 ### 系统管理表 #### sys_online_user - 在线用户表 - `id` - ID - `employee_no` - 工号 - `token` - Token - `login_time` - 登录时间 - `last_active_time` - 最后活跃时间 - `ip_address` - IP 地址 - `user_agent` - User-Agent #### sys_token_blacklist - Token 黑名单表 - `id` - ID - `token` - Token - `employee_no` - 工号 - `reason` - 拉黑原因 - `expire_time` - 过期时间 - `create_time` - 创建时间 ## JWT Token 机制 ### 双 Token 设计 #### Access Token - **有效期**: 4 小时 - **用途**: API 请求认证 - **存储位置**: Cookie(HttpOnly) - **自动刷新**: 过期后自动使用 Refresh Token 刷新 #### Refresh Token - **有效期**: 24 小时 - **用途**: 刷新 Access Token - **存储位置**: Cookie(HttpOnly) - **刷新机制**: Access Token 过期时自动刷新 ### Cookie 安全配置 ```yaml Access Token Cookie: Name: token Max-Age: 14400 (4 小时) Path: / HttpOnly: true # ✅ 禁止 JavaScript 访问,防止 XSS Secure: true # ✅ 仅通过 HTTPS 传输(生产环境) SameSite: Strict # ✅ 严格 CSRF 防护 Refresh Token Cookie: Name: refreshToken Max-Age: 86400 (24 小时) Path: / HttpOnly: true # ✅ 禁止 JavaScript 访问 Secure: true # ✅ 仅通过 HTTPS 传输 SameSite: None # ✅ 允许跨域刷新 Token ``` ### Token 刷新流程 1. 前端发起 API 请求时自动携带 Cookie 中的 Token 2. 后端 JWT 拦截器验证 Token 有效性 3. 如果 Token 过期(返回 401),前端自动调用刷新接口 4. 后端验证 Refresh Token 有效后,生成新的 Token 和 Refresh Token 5. 更新 Cookie 中的 Token,继续原请求 6. 如果 Refresh Token 也过期,需要重新登录 ### Token 黑名单机制 **使用场景**: - 用户主动退出登录 - 管理员强制用户下线 - Token 被盗用时的紧急处理 **实现方式**: - 将 Token 加入 `sys_token_blacklist` 表 - JWT 拦截器检查 Token 是否在黑名单中 - 黑名单 Token 在有效期内无法使用 - 支持设置拉黑原因和过期时间 ## 注意事项 ### 环境要求 - **JDK**: 1.8+ - **Node.js**: 14.0+ - **MySQL**: 8.0+ - **Maven**: 3.6+ ### 开发环境配置 1. **数据库配置** - 确保 MySQL 服务已启动且端口为 3306 - 数据库账号密码正确(root/123456) - 先执行数据库初始化脚本再启动后端 2. **后端配置** - 修改 `application.yml` 中的数据库连接信息 - JWT Secret 建议在生产环境更换为更安全的密钥 - 日志级别可调整为 DEBUG 便于调试 3. **前端配置** - API 代理已在 `vite.config.js` 中配置 - 生产环境需要修改 API 基础地址 - 跨域问题通过开发服务器代理解决 ### 安全建议 #### 开发环境 ```yaml # application.yml logging: level: com.usermanage: DEBUG # 开发环境输出详细日志 ``` #### 生产环境 ```yaml # application.yml logging: level: root: WARN com.usermanage: INFO # 生产环境只输出重要信息 jwt: secret: "更换为更长的随机字符串" # 使用更安全的密钥 ``` ### 常见问题 **Q: 登录后显示普通用户菜单?** A: 检查数据库中 `sys_user_role` 表是否正确配置用户角色关系。 **Q: Token 刷新失败?** A: 检查 Cookie 配置和 Refresh Token 是否过期。 **Q: 登录日志不记录?** A: 检查 `sys_login_log` 表是否存在,以及 UserServiceImpl 中是否正确调用。 **Q: 强制下线不生效?** A: 检查 Token 黑名单机制是否正确实现,JWT 拦截器是否检查黑名单。 ## 开发说明 ### 添加新功能模块 #### 1. 后端开发流程 **Step 1: 创建数据库表** ```sql CREATE TABLE `sys_xxx` ( `id` BIGINT NOT NULL AUTO_INCREMENT, -- ... 其他字段 PRIMARY KEY (`id`) ); ``` **Step 2: 生成实体类** ```java @Data @TableName("sys_xxx") public class SysXxx { @TableId(type = IdType.AUTO) private Long id; // ... 其他字段 } ``` **Step 3: 创建 Mapper 接口** ```java public interface SysXxxMapper extends BaseMapper { // MyBatis-Plus 自动实现 CRUD } ``` **Step 4: 创建 Service 层** ```java public interface XxxService { // 业务方法定义 } @Service public class XxxServiceImpl implements XxxService { // 业务逻辑实现 } ``` **Step 5: 创建 Controller** ```java @RestController @RequestMapping("/api/xxx") public class XxxController { @Autowired private XxxService xxxService; @GetMapping("/list") public Result list(...) { // 处理请求 } } ``` **Step 6: 配置菜单权限** ```sql -- 插入菜单记录 INSERT INTO sys_menu (menu_name, menu_path, permission, ...) VALUES (...); -- 为角色分配权限 INSERT INTO sys_role_menu (role_id, menu_id) VALUES (...); ``` #### 2. 前端开发流程 **Step 1: 创建 API 文件** ```javascript // src/api/xxx.js import request from '@/utils/request' export function getXxxList(params) { return request({ url: '/api/xxx/list', method: 'get', params }) } ``` **Step 2: 创建页面组件** ```vue ``` **Step 3: 配置路由** ```javascript // src/router/index.js { path: '/xxx', name: 'Xxx', component: () => import('@/views/xxx/Index.vue'), meta: { title: '功能名称', requiresAuth: true } } ``` **Step 4: 测试验证** - 访问新页面测试功能 - 检查权限控制是否生效 - 验证数据交互是否正常 ### 自定义权限控制 #### 按钮级权限 ```vue ``` #### 菜单级权限 - 后端返回用户可访问的菜单列表 - 前端根据菜单列表动态生成路由 - 未授权的菜单不会显示 ### AOP 切面编程 #### 操作日志切面 ```java @Aspect @Component public class OperationLogAspect { @Around("@annotation(operationLog)") public Object around(ProceedingJoinPoint point, OperationLog operationLog) { // 记录操作日志 long startTime = System.currentTimeMillis(); try { Object result = point.proceed(); // 记录成功日志 return result; } catch (Exception e) { // 记录错误日志 throw e; } } } ``` #### 使用注解 ```java @OperationLog(module = "用户管理", operationType = "新增") @PostMapping public Result addUser(@RequestBody User user) { userService.add(user); return Result.success(); } ``` ## License MIT --- ## 项目演进历史 ### v2.0 - 当前版本(2026-03) **核心功能**: - ✅ RBAC 权限管理体系 - ✅ 部门管理(树形结构) - ✅ 团队管理(成员管理) - ✅ 登录日志审计 - ✅ 操作审计日志 - ✅ 强制下线功能 - ✅ Token 黑名单机制 **技术特性**: - ✅ JWT 双 Token 认证 - ✅ Cookie 安全存储(HttpOnly、Secure、SameSite) - ✅ 工号登录认证 - ✅ 动态路由菜单 - ✅ 按钮级权限控制 - ✅ AOP 日志切面 ### v1.0 - 初始版本 **基础功能**: - 用户 CRUD 操作 - 角色管理 - 菜单权限 - JWT 单 Token 认证 - 简单的 RBAC 模型 --- ## 技术亮点 ### 1. 安全性设计 #### Cookie 安全 - **HttpOnly**: 防止 XSS 攻击窃取 Cookie - **Secure**: 仅通过 HTTPS 传输,防止中间人攻击 - **SameSite**: 严格 CSRF 防护 #### Token 机制 - **双 Token**: Access Token + Refresh Token,平衡安全性和用户体验 - **自动刷新**: Token 过期无感知续期 - **黑名单机制**: 支持主动使 Token 失效 #### 密码安全 - **BCrypt 加密**: 强哈希算法,支持盐值 - **密码强度**: 建议生产环境增加密码复杂度验证 ### 2. 性能优化 #### 数据库优化 - **连接池**: HikariCP 高性能连接池 - **分页查询**: MyBatis-Plus 分页插件,避免全表扫描 - **索引优化**: 唯一索引、外键索引提升查询效率 #### 缓存策略 - **Token 缓存**: 在线用户信息缓存 - **权限缓存**: 用户权限列表缓存到 ThreadLocal ### 3. 可扩展性设计 #### 分层架构 - **Controller 层**: 处理 HTTP 请求 - **Service 层**: 业务逻辑实现 - **Mapper 层**: 数据访问层 - **Entity 层**: 数据实体 #### 模块化设计 - **独立功能模块**: 部门、团队、日志等模块独立开发 - **AOP 切面**: 日志、审计等非业务逻辑独立封装 - **工具类封装**: JwtUtil、CookieUtil 等通用工具 #### 配置化 - **外部配置**: application.yml 集中管理配置 - **环境隔离**: 开发、测试、生产环境不同配置 - **灵活扩展**: 支持新增配置项无需修改代码 --- ## 贡献指南 ### 报告 Bug 1. 查看是否已存在相同 Issue 2. 提供详细的复现步骤 3. 附上错误日志和截图 ### 提交代码 1. Fork 本项目 2. 创建功能分支 (`git checkout -b feature/AmazingFeature`) 3. 提交更改 (`git commit -m 'Add some AmazingFeature'`) 4. 推送到分支 (`git push origin feature/AmazingFeature`) 5. 创建 Pull Request ### 代码规范 - **后端**: 遵循阿里巴巴 Java 开发手册 - **前端**: 遵循 Vue.js 风格指南 - **提交信息**: 使用语义化提交消息 --- ## 联系方式 - **项目地址**: https://github.com/your-repo/user-manage - **Issue 反馈**: https://github.com/your-repo/user-manage/issues --- **最后更新时间**: 2026 年 3 月 24 日