80 KiB
80 KiB
HoneyBox 后台管理系统 - 业务流程图
系统概述
后台管理系统（HoneyBox.Admin）是一个基于 ASP.NET Core + Vue3 + Element Plus 的 RBAC 权限管理系统，用于管理 HoneyBox 抽奖盲盒平台的后台运营。
一、系统架构总览
┌─────────────────────────────────────────────────────────────────────────────┐
│ HoneyBox 后台管理系统 │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ 认证模块 │ │ 用户管理 │ │ 角色管理 │ │ 菜单管理 │ │
│ │ (Auth) │ │ (AdminUser) │ │ (Role) │ │ (Menu) │ │
│ └──────┬──────┘ └──────┬──────┘ └──────┬──────┘ └──────┬──────┘ │
│ │ │ │ │ │
│ ┌──────┴──────┐ ┌──────┴──────┐ ┌──────┴──────┐ ┌──────┴──────┐ │
│ │ 部门管理 │ │ 权限管理 │ │ 操作日志 │ │ 个人中心 │ │
│ │(Department) │ │(Permission) │ │(OperationLog)│ │ (Profile) │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
二、用户认证流程
2.1 登录流程
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
│ 用户 │ │ 前端 │ │ 后端 │ │ 数据库 │
└────┬─────┘ └────┬─────┘ └────┬─────┘ └────┬─────┘
│ │ │ │
│ 1. 打开登录页 │ │ │
│───────────────>│ │ │
│ │ │ │
│ │ 2. 请求验证码 │ │
│ │───────────────>│ │
│ │ │ 生成验证码 │
│ │ │ 存入缓存(5min)│
│ │ 验证码图片 │ │
│ │<───────────────│ │
│ 显示验证码 │ │ │
│<───────────────│ │ │
│ │ │ │
│ 3. 输入账号 │ │ │
│ 密码+验证码│ │ │
│───────────────>│ │ │
│ │ 4. 提交登录 │ │
│ │───────────────>│ │
│ │ │ 校验验证码 │
│ │ │ 校验密码 │
│ │ │ 生成双Token │
│ │ │───────────────>│ 存储RefreshToken
│ │ AccessToken │ │
│ │ RefreshToken │ │
│ │ UserInfo │<───────────────│
│ │<───────────────│ │
│ │ │ │
│ │ 5. 存储Token │ │
│ │ 获取用户菜单 │ │
│ │───────────────>│ │
│ │ 菜单树 │ │
│ │<───────────────│ │
│ │ 生成动态路由 │ │
│ 跳转首页 │ │ │
│<───────────────│ │ │
2.2 Token 刷新流程
┌──────────┐ ┌──────────┐ ┌──────────┐
│ 前端 │ │ 后端 │ │ 数据库 │
└────┬─────┘ └────┬─────┘ └────┬─────┘
│ │ │
│ API请求 │ │
│ (AccessToken) │ │
│───────────────>│ │
│ │ │
│ 401 Token过期 │ │
│<───────────────│ │
│ │ │
│ 刷新Token请求 │ │
│ (RefreshToken)│ │
│───────────────>│ │
│ │ 验证Token │
│ │───────────────>│
│ │ Token有效 │
│ │<───────────────│
│ │ 生成新Token │
│ │ 更新数据库 │
│ │───────────────>│
│ 新AccessToken │ │
│ 新RefreshToken│ │
│<───────────────│ │
│ │ │
│ 重试原请求 │ │
│───────────────>│ │
│ 正常响应 │ │
│<───────────────│ │
2.3 登出流程
┌──────────┐ ┌──────────┐ ┌──────────┐
│ 用户 │ │ 前端 │ │ 后端 │
└────┬─────┘ └────┬─────┘ └────┬─────┘
│ │ │
│ 点击退出 │ │
│───────────────>│ │
│ │ 调用登出API │
│ │───────────────>│
│ │ │ 撤销RefreshToken
│ │ 成功 │
│ │<───────────────│
│ │ │
│ │ 清除本地Token │
│ │ 重置路由状态 │
│ 跳转登录页 │ │
│<───────────────│ │
三、RBAC 权限管理流程
3.1 权限模型关系
┌─────────────────────────────────────────────────────────────────────────────┐
│ RBAC 权限模型 │
├─────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ AdminUser│ N:N │ Role │ N:N │ Menu │ │
│ │ 管理员 │────────>│ 角色 │────────>│ 菜单 │ │
│ └────┬─────┘ └────┬─────┘ └──────────┘ │
│ │ │ │
│ │ N:1 │ N:N │
│ ▼ ▼ │
│ ┌──────────┐ ┌──────────┐ │
│ │Department│ │Permission│ │
│ │ 部门 │ │ 权限 │ │
│ └────┬─────┘ └──────────┘ │
│ │ │
│ │ N:N │
│ ▼ │
│ ┌──────────┐ │
│ │ Menu │ (部门可分配专属菜单) │
│ └──────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────────────┘
权限来源优先级：用户专属菜单 > 角色菜单 > 部门菜单
3.2 用户菜单获取流程
┌──────────────────────────────────────────────────────────────────────────┐
│ 用户菜单权限计算流程 │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ │
│ │ 获取用户 │ │
│ │ 基本信息 │ │
│ └──────┬──────┘ │
│ │ │
│ ▼ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ 用户专属菜单│ │ 用户角色 │ │ 用户部门 │ │
│ │ (直接分配) │ │ 的菜单权限 │ │ 的菜单权限 │ │
│ └──────┬──────┘ └──────┬──────┘ └──────┬──────┘ │
│ │ │ │ │
│ └───────────────────┼───────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────┐ │
│ │ 合并去重 │ │
│ │ 构建菜单树 │ │
│ └──────┬──────┘ │
│ │ │
│ ▼ │
│ ┌─────────────┐ │
│ │ 返回用户 │ │
│ │ 可访问菜单 │ │
│ └─────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────┘
四、管理员用户管理流程
4.1 创建管理员流程
┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐
│ 操作员 │ │ 前端 │ │ 后端 │ │ 数据库 │
└────┬─────┘ └────┬─────┘ └────┬─────┘ └────┬─────┘
│ │ │ │
│ 1. 进入用户 │ │ │
│ 管理页面 │ │ │
│───────────────>│ │ │
│ │ 获取用户列表 │ │
│ │───────────────>│ │
│ │ │───────────────>│
│ │ 用户列表 │ │
│ │<───────────────│<───────────────│
│ 显示列表 │ │ │
│<───────────────│ │ │
│ │ │ │
│ 2. 点击新增 │ │ │
│───────────────>│ │ │
│ 弹出表单 │ │ │
│<───────────────│ │ │
│ │ │ │
│ 3. 填写信息 │ │ │
│ - 用户名 │ │ │
│ - 密码 │ │ │
│ - 真实姓名 │ │ │
│ - 邮箱/手机 │ │ │
│ - 部门 │ │ │
│ - 状态 │ │ │
│───────────────>│ │ │
│ │ 4. 提交创建 │ │
│ │───────────────>│ │
│ │ │ 检查用户名 │
│ │ │ 是否重复 │
│ │ │───────────────>│
│ │ │ │
│ │ │ 密码加密 │
│ │ │ 创建用户 │
│ │ │───────────────>│
│ │ 创建成功 │ │
│ │<───────────────│ │
│ 刷新列表 │ │ │
│<───────────────│ │ │
4.2 分配角色流程
┌──────────┐ ┌──────────┐ ┌──────────┐
│ 操作员 │ │ 前端 │ │ 后端 │
└────┬─────┘ └────┬─────┘ └────┬─────┘
│ │ │
│ 点击分配角色 │ │
│───────────────>│ │
│ │ 获取所有角色 │
│ │───────────────>│
│ │ 角色列表 │
│ │<───────────────│
│ │ │
│ │ 获取用户已有 │
│ │ 角色 │
│ │───────────────>│
│ │ 已分配角色ID │
│ │<───────────────│
│ │ │
│ 显示角色选择 │ │
│ (已选中已有) │ │
│<───────────────│ │
│ │ │
│ 勾选/取消角色 │ │
│───────────────>│ │
│ │ 提交角色分配 │
│ │───────────────>│
│ │ │ 更新用户角色
│ │ 分配成功 │ 关联表
│ │<───────────────│
│ 提示成功 │ │
│<───────────────│ │
五、角色管理流程
5.1 角色 CRUD 流程
┌──────────────────────────────────────────────────────────────────────────┐
│ 角色管理操作 │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 角色列表页面 │ │
│ │ ┌─────────┬─────────┬─────────┬─────────┬─────────┬─────────┐ │ │
│ │ │ 角色名称│ 角色编码│ 描述 │ 状态 │ 排序 │ 操作 │ │ │
│ │ ├─────────┼─────────┼─────────┼─────────┼─────────┼─────────┤ │ │
│ │ │超级管理员│ admin │ 最高权限│ 启用 │ 1 │编辑|删除│ │ │
│ │ │运营人员 │ operator│ 运营管理│ 启用 │ 2 │编辑|删除│ │ │
│ │ │客服人员 │ service │ 客服处理│ 启用 │ 3 │编辑|删除│ │ │
│ │ └─────────┴─────────┴─────────┴─────────┴─────────┴─────────┘ │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ 操作流程： │
│ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ 新增 │───>│ 填写 │───>│ 保存 │───>│ 刷新 │ │
│ │ 角色 │ │ 表单 │ │ 数据 │ │ 列表 │ │
│ └────────┘ └────────┘ └────────┘ └────────┘ │
│ │
│ ┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ 编辑 │───>│ 加载 │───>│ 修改 │───>│ 保存 │ │
│ │ 角色 │ │ 数据 │ │ 表单 │ │ 更新 │ │
│ └────────┘ └────────┘ └────────┘ └────────┘ │
│ │
│ ┌────────┐ ┌────────┐ ┌────────┐ │
│ │ 删除 │───>│ 确认 │───>│ 执行 │ (检查是否有用户使用该角色) │
│ │ 角色 │ │ 弹窗 │ │ 删除 │ │
│ └────────┘ └────────┘ └────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────┘
5.2 角色分配菜单流程
┌──────────┐ ┌──────────┐ ┌──────────┐
│ 操作员 │ │ 前端 │ │ 后端 │
└────┬─────┘ └────┬─────┘ └────┬─────┘
│ │ │
│ 点击分配菜单 │ │
│───────────────>│ │
│ │ 获取菜单树 │
│ │───────────────>│
│ │ 完整菜单树 │
│ │<───────────────│
│ │ │
│ │ 获取角色已有 │
│ │ 菜单 │
│ │───────────────>│
│ │ 已分配菜单ID │
│ │<───────────────│
│ │ │
│ 显示菜单树 │ │
│ (勾选已分配) │ │
│<───────────────│ │
│ │ │
│ 勾选菜单节点 │ │
│ (支持全选/ │ │
│ 半选状态) │ │
│───────────────>│ │
│ │ 提交菜单分配 │
│ │───────────────>│
│ │ │ 更新角色菜单
│ │ 分配成功 │ 关联表
│ │<───────────────│
│ 提示成功 │ │
│<───────────────│ │
5.3 角色分配权限流程
┌──────────────────────────────────────────────────────────────────────────┐
│ 角色权限分配界面 │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ 角色：运营人员 │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ 权限模块 权限项 │ │
│ ├────────────────────────────────────────────────────────────────┤ │
│ │ 用户管理 ☑ 查看用户 ☑ 创建用户 ☐ 删除用户 │ │
│ │ 角色管理 ☑ 查看角色 ☐ 创建角色 ☐ 删除角色 │ │
│ │ 菜单管理 ☑ 查看菜单 ☐ 创建菜单 ☐ 删除菜单 │ │
│ │ 部门管理 ☑ 查看部门 ☐ 创建部门 ☐ 删除部门 │ │
│ │ 日志管理 ☑ 查看日志 ☐ 导出日志 │ │
│ └────────────────────────────────────────────────────────────────┘ │
│ │
│ [保存] [取消] │
│ │
└──────────────────────────────────────────────────────────────────────────┘
六、菜单管理流程
6.1 菜单类型说明
┌──────────────────────────────────────────────────────────────────────────┐
│ 菜单类型 │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ 类型1: 目录 (Directory) │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 📁 系统管理 │ │
│ │ ├── 📄 用户管理 │ │
│ │ ├── 📄 角色管理 │ │
│ │ └── 📄 菜单管理 │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ - 不对应具体页面，仅作为分组容器 │
│ - 有 path 但无 component │
│ │
│ 类型2: 菜单 (Menu) │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 📄 用户管理 → /system/user → system/user/index │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ - 对应具体页面 │
│ - 有 path 和 component │
│ │
│ 类型3: 按钮 (Button) │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 🔘 新增用户 → permission: "system:user:create" │ │
│ │ 🔘 删除用户 → permission: "system:user:delete" │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ - 不显示在菜单中 │
│ - 用于按钮级权限控制 │
│ │
└──────────────────────────────────────────────────────────────────────────┘
6.2 菜单树结构示例
┌──────────────────────────────────────────────────────────────────────────┐
│ 后台菜单树结构 │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ 📊 控制台 (Dashboard) │
│ └── 📄 首页 (/dashboard) │
│ │
│ 📁 系统管理 (/system) │
│ ├── 📄 用户管理 (/system/user) │
│ │ ├── 🔘 新增用户 (system:user:create) │
│ │ ├── 🔘 编辑用户 (system:user:update) │
│ │ ├── 🔘 删除用户 (system:user:delete) │
│ │ ├── 🔘 分配角色 (system:user:assign-role) │
│ │ └── 🔘 重置密码 (system:user:reset-password) │
│ │ │
│ ├── 📄 角色管理 (/system/role) │
│ │ ├── 🔘 新增角色 (system:role:create) │
│ │ ├── 🔘 编辑角色 (system:role:update) │
│ │ ├── 🔘 删除角色 (system:role:delete) │
│ │ └── 🔘 分配菜单 (system:role:assign-menu) │
│ │ │
│ ├── 📄 菜单管理 (/system/menu) │
│ │ ├── 🔘 新增菜单 (system:menu:create) │
│ │ ├── 🔘 编辑菜单 (system:menu:update) │
│ │ └── 🔘 删除菜单 (system:menu:delete) │
│ │ │
│ ├── 📄 部门管理 (/system/department) │
│ │ ├── 🔘 新增部门 (system:department:create) │
│ │ ├── 🔘 编辑部门 (system:department:update) │
│ │ └── 🔘 删除部门 (system:department:delete) │
│ │ │
│ ├── 📄 权限管理 (/system/permission) │
│ │ │
│ └── 📄 操作日志 (/system/log) │
│ │
└──────────────────────────────────────────────────────────────────────────┘
七、部门管理流程
7.1 部门树结构
┌──────────────────────────────────────────────────────────────────────────┐
│ 部门组织架构 │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ 🏢 总公司 (HQ) │
│ │ │
│ ├── 🏬 运营部 (OPS) │
│ │ ├── 👥 运营一组 │
│ │ └── 👥 运营二组 │
│ │ │
│ ├── 🏬 技术部 (TECH) │
│ │ ├── 👥 前端组 │
│ │ ├── 👥 后端组 │
│ │ └── 👥 测试组 │
│ │ │
│ ├── 🏬 客服部 (CS) │
│ │ ├── 👥 售前客服 │
│ │ └── 👥 售后客服 │
│ │ │
│ └── 🏬 财务部 (FIN) │
│ │
└──────────────────────────────────────────────────────────────────────────┘
7.2 部门与菜单关联
┌──────────┐ ┌──────────┐ ┌──────────┐
│ 操作员 │ │ 前端 │ │ 后端 │
└────┬─────┘ └────┬─────┘ └────┬─────┘
│ │ │
│ 选择部门 │ │
│ 点击分配菜单 │ │
│───────────────>│ │
│ │ 获取菜单树 │
│ │───────────────>│
│ │ 菜单树 │
│ │<───────────────│
│ │ │
│ │ 获取部门已有 │
│ │ 菜单 │
│ │───────────────>│
│ │ 已分配菜单ID │
│ │<───────────────│
│ │ │
│ 显示菜单树 │ │
│ 勾选部门菜单 │ │
│<───────────────│ │
│ │ │
│ 保存分配 │ │
│───────────────>│ │
│ │ 提交分配 │
│ │───────────────>│
│ │ 成功 │
│ │<───────────────│
│ 提示成功 │ │
│<───────────────│ │
说明：部门菜单是该部门下所有用户的基础菜单权限
八、操作日志流程
8.1 日志记录流程
┌──────────────────────────────────────────────────────────────────────────┐
│ 操作日志记录机制 │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ │
│ │ API 请求 │ │
│ └──────┬──────┘ │
│ │ │
│ ▼ │
│ ┌─────────────┐ ┌─────────────────────────────────────────┐ │
│ │ 权限过滤器 │────>│ [OperationLog] 特性标记的接口 │ │
│ └──────┬──────┘ └─────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────┐ │
│ │ 执行业务 │ │
│ │ 逻辑 │ │
│ └──────┬──────┘ │
│ │ │
│ ▼ │
│ ┌─────────────┐ │
│ │ 日志过滤器 │ 记录： │
│ │ (After) │ - 用户ID/用户名 │
│ │ │ - 模块名称 │
│ │ │ - 操作类型 │
│ │ │ - 请求方法/URL │
│ │ │ - 请求参数 │
│ │ │ - IP地址 │
│ │ │ - UserAgent │
│ │ │ - 执行时长 │
│ │ │ - 执行状态 │
│ │ │ - 错误信息(如有) │
│ └──────┬──────┘ │
│ │ │
│ ▼ │
│ ┌─────────────┐ │
│ │ 异步写入 │ │
│ │ 数据库 │ │
│ └─────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────┘
8.2 日志查询界面
┌──────────────────────────────────────────────────────────────────────────┐
│ 操作日志查询 │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ 筛选条件： │
│ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐ │
│ │ 关键词搜索 │ │ 模块筛选 │ │ 开始日期 │ │ 结束日期 │ [查询] │
│ └────────────┘ └────────────┘ └────────────┘ └────────────┘ │
│ │
│ ┌────────────────────────────────────────────────────────────────┐ │
│ │ 操作人 │ 模块 │ 操作 │ 方法 │ URL │ 状态 │ 时间 │ │
│ ├────────┼────────┼────────┼──────┼────────────┼──────┼─────────┤ │
│ │ admin │用户管理│创建用户│ POST │/admin/users│ 成功 │10:30:25 │ │
│ │ admin │角色管理│分配菜单│ PUT │/admin/roles│ 成功 │10:28:15 │ │
│ │ ops01 │用户管理│重置密码│ PUT │/admin/users│ 成功 │10:25:00 │ │
│ │ admin │登录认证│用户登录│ POST │/admin/login│ 成功 │10:20:30 │ │
│ └────────┴────────┴────────┴──────┴────────────┴──────┴─────────┘ │
│ │
│ < 1 2 3 4 5 ... 10 > │
│ │
└──────────────────────────────────────────────────────────────────────────┘
九、前端动态路由生成流程
9.1 路由生成流程
┌──────────────────────────────────────────────────────────────────────────┐
│ 前端动态路由生成 │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ │
│ │ 用户登录 │ │
│ │ 成功 │ │
│ └──────┬──────┘ │
│ │ │
│ ▼ │
│ ┌─────────────┐ │
│ │ 调用 │ GET /admin/menus/user │
│ │ getUserMenus│ │
│ └──────┬──────┘ │
│ │ │
│ ▼ │
│ ┌─────────────┐ │
│ │ 后端返回 │ 返回用户可访问的菜单树 │
│ │ 菜单树 │ (合并角色+部门+用户专属菜单) │
│ └──────┬──────┘ │
│ │ │
│ ▼ │
│ ┌─────────────┐ │
│ │ 遍历菜单树 │ 跳过 menuType=3 (按钮) │
│ │ 生成路由 │ │
│ └──────┬──────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 路由转换规则： │ │
│ │ │ │
│ │ 菜单数据 路由配置 │ │
│ │ ───────── ───────── │ │
│ │ parentId: 0 component: Layout │ │
│ │ path: "/system" → path: "/system" │ │
│ │ name: "系统管理" meta: { title: "系统管理" } │ │
│ │ │ │
│ │ parentId: 1 component: () => import(...) │ │
│ │ path: "user" → path: "user" │ │
│ │ component: "system/user" meta: { title: "用户管理" } │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────┐ │
│ │ router. │ 动态添加路由 │
│ │ addRoute() │ │
│ └──────┬──────┘ │
│ │ │
│ ▼ │
│ ┌─────────────┐ │
│ │ 添加 404 │ 兜底路由 │
│ │ 路由 │ path: '/:pathMatch(.*)*' │
│ └─────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────┘
十、权限控制流程
10.1 后端 API 权限控制
┌──────────────────────────────────────────────────────────────────────────┐
│ 后端权限控制流程 │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ │
│ │ API 请求 │ │
│ │ (带Token) │ │
│ └──────┬──────┘ │
│ │ │
│ ▼ │
│ ┌─────────────┐ │
│ │ JWT 认证 │ 验证 Token 有效性 │
│ │ 中间件 │ 解析用户信息 │
│ └──────┬──────┘ │
│ │ │
│ ▼ │
│ ┌─────────────┐ ┌─────────────────────────────────────────┐ │
│ │ 权限过滤器 │────>│ [AdminPermission("system:user:create")]│ │
│ │ │ │ 检查用户是否拥有该权限 │ │
│ └──────┬──────┘ └─────────────────────────────────────────┘ │
│ │ │
│ │ 有权限 │
│ ▼ │
│ ┌─────────────┐ │
│ │ 执行业务 │ │
│ │ Controller │ │
│ └──────┬──────┘ │
│ │ │
│ ▼ │
│ ┌─────────────┐ │
│ │ 返回结果 │ │
│ └─────────────┘ │
│ │
│ 无权限时： │
│ ┌─────────────┐ │
│ │ 返回 403 │ { code: 403, message: "无权限访问" } │
│ │ Forbidden │ │
│ └─────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────┘
10.2 前端按钮权限控制
┌──────────────────────────────────────────────────────────────────────────┐
│ 前端按钮权限控制 │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ 方式1: v-permission 指令 │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ <el-button v-permission="'system:user:create'">新增用户</el-button>│ │
│ │ │ │
│ │ // 指令实现 │ │
│ │ if (!userPermissions.includes(permission)) { │ │
│ │ el.parentNode?.removeChild(el) // 移除元素 │ │
│ │ } │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ 方式2: hasPermission 函数 │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ <el-button v-if="hasPermission('system:user:delete')"> │ │
│ │ 删除用户 │ │
│ │ </el-button> │ │
│ │ │ │
│ │ // 函数实现 │ │
│ │ const hasPermission = (permission: string) => { │ │
│ │ return userStore.permissions.includes(permission) │ │
│ │ } │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
│ 权限数据来源： │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 登录响应 → userInfo.permissions → ['system:user:create', ...] │ │
│ │ 存储到 userStore.permissions │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────┘
十一、完整业务操作示例
11.1 新增运营人员完整流程
┌──────────────────────────────────────────────────────────────────────────┐
│ 新增运营人员完整操作流程 │
├──────────────────────────────────────────────────────────────────────────┤
│ │
│ 步骤1: 创建角色 (如果不存在) │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 系统管理 → 角色管理 → 新增 │ │
│ │ - 角色名称: 运营人员 │ │
│ │ - 角色编码: operator │ │
│ │ - 状态: 启用 │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ 步骤2: 为角色分配菜单权限 │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 角色列表 → 运营人员 → 分配菜单 │ │
│ │ 勾选: ☑ 控制台 ☑ 用户管理(查看) ☑ 订单管理 ☑ 商品管理 │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ 步骤3: 创建管理员账号 │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 系统管理 → 用户管理 → 新增 │ │
│ │ - 用户名: ops001 │ │
│ │ - 密码: ******** │ │
│ │ - 真实姓名: 张三 │ │
│ │ - 部门: 运营部 │ │
│ │ - 状态: 启用 │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ 步骤4: 为用户分配角色 │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ 用户列表 → ops001 → 分配角色 │ │
│ │ 勾选: ☑ 运营人员 │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │ │
│ ▼ │
│ 步骤5: 用户登录验证 │
│ ┌─────────────────────────────────────────────────────────────────┐ │
│ │ ops001 登录后只能看到: │ │
│ │ - 控制台 │ │
│ │ - 用户管理 (仅查看) │ │
│ │ - 订单管理 │ │
│ │ - 商品管理 │ │
│ └─────────────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────┘
十二、系统数据流总览
┌──────────────────────────────────────────────────────────────────────────────────────┐
│ HoneyBox Admin 数据流总览 │
├──────────────────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────────────────────────────┐ │
│ │ 前端 (Vue3 + Element Plus) │ │
│ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │
│ │ │ Views │ │ Store │ │ Router │ │ API │ │ Utils │ │ │
│ │ │ 页面 │ │ 状态 │ │ 路由 │ │ 接口 │ │ 工具 │ │ │
│ │ └────┬─────┘ └────┬─────┘ └────┬─────┘ └────┬─────┘ └────┬─────┘ │ │
│ │ │ │ │ │ │ │ │
│ │ └─────────────┴─────────────┴──────┬──────┴─────────────┘ │ │
│ └──────────────────────────────────────────┼──────────────────────────────────┘ │
│ │ │
│ │ HTTP/HTTPS │
│ │ (JWT Bearer) │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────────────┐ │
│ │ 后端 (ASP.NET Core) │ │
│ │ │ │
│ │ ┌──────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ Controllers 层 │ │ │
│ │ │ AuthController │ AdminUserController │ RoleController │ ... │ │ │
│ │ └────────────────────────────────────────────────────────────────┬─────┘ │ │
│ │ │ │ │
│ │ ┌──────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ Filters 层 │ │ │
│ │ │ AdminAuthFilter │ AdminPermissionAttribute │ OperationLogAttribute│ │ │
│ │ └────────────────────────────────────────────────────────────────┬─────┘ │ │
│ │ │ │ │
│ │ ┌──────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ Services 层 │ │ │
│ │ │ AuthService │ AdminUserService │ RoleService │ MenuService │ ...│ │ │
│ │ └────────────────────────────────────────────────────────────────┬─────┘ │ │
│ │ │ │ │
│ │ ┌──────────────────────────────────────────────────────────────────────┐ │ │
│ │ │ Data 层 │ │ │
│ │ │ AdminDbContext (EF Core) │ │ │
│ │ └────────────────────────────────────────────────────────────────┬─────┘ │ │
│ └──────────────────────────────────────────────────────────────────┼──────────┘ │
│ │ │
│ ▼ │
│ ┌─────────────────────────────────────────────────────────────────────────────┐ │
│ │ SQL Server 数据库 │ │
│ │ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ │
│ │ │admin_users │ │ roles │ │ menus │ │departments │ │ │
│ │ └────────────┘ └────────────┘ └────────────┘ └────────────┘ │ │
│ │ ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐ │ │
│ │ │ user_roles │ │role_menus │ │permissions │ │refresh_tokens│ │ │
│ │ └────────────┘ └────────────┘ └────────────┘ └────────────┘ │ │
│ │ ┌────────────┐ ┌────────────┐ │ │
│ │ │operation_ │ │dept_menus │ │ │
│ │ │ logs │ │ │ │ │
│ │ └────────────┘ └────────────┘ │ │
│ └─────────────────────────────────────────────────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────────────────────────────────────────┘
十三、API 接口清单
| 模块 | 接口 | 方法 | 说明 |
|---|---|---|---|
| 认证 | /admin/auth/captcha | POST | 获取验证码 |
| 认证 | /admin/auth/login | POST | 登录 |
| 认证 | /admin/auth/refresh | POST | 刷新Token |
| 认证 | /admin/auth/logout | POST | 登出 |
| 认证 | /admin/auth/info | GET | 获取当前用户信息 |
| 认证 | /admin/auth/password | PUT | 修改密码 |
| 用户 | /admin/users | GET | 用户列表(分页) |
| 用户 | /admin/users | POST | 创建用户 |
| 用户 | /admin/users/{id} | GET | 用户详情 |
| 用户 | /admin/users/{id} | PUT | 更新用户 |
| 用户 | /admin/users/{id} | DELETE | 删除用户 |
| 用户 | /admin/users/{id}/roles | GET/PUT | 用户角色 |
| 用户 | /admin/users/{id}/menus | GET/PUT | 用户专属菜单 |
| 角色 | /admin/roles | GET | 角色列表(分页) |
| 角色 | /admin/roles/all | GET | 所有角色 |
| 角色 | /admin/roles | POST | 创建角色 |
| 角色 | /admin/roles/{id} | PUT | 更新角色 |
| 角色 | /admin/roles/{id} | DELETE | 删除角色 |
| 角色 | /admin/roles/{id}/menus | GET/PUT | 角色菜单 |
| 角色 | /admin/roles/{id}/permissions | GET/PUT | 角色权限 |
| 菜单 | /admin/menus | GET | 菜单树 |
| 菜单 | /admin/menus/user | GET | 当前用户菜单 |
| 菜单 | /admin/menus | POST | 创建菜单 |
| 菜单 | /admin/menus/{id} | PUT | 更新菜单 |
| 菜单 | /admin/menus/{id} | DELETE | 删除菜单 |
| 部门 | /admin/departments | GET | 部门树 |
| 部门 | /admin/departments | POST | 创建部门 |
| 部门 | /admin/departments/{id} | PUT | 更新部门 |
| 部门 | /admin/departments/{id} | DELETE | 删除部门 |
| 部门 | /admin/departments/{id}/menus | GET/PUT | 部门菜单 |
| 权限 | /admin/permissions | GET | 权限列表 |
| 权限 | /admin/permissions/by-module | GET | 按模块分组 |
| 权限 | /admin/permissions | POST | 创建权限 |
| 权限 | /admin/permissions/{id} | PUT | 更新权限 |
| 权限 | /admin/permissions/{id} | DELETE | 删除权限 |
| 日志 | /admin/logs | GET | 操作日志列表 |
| 日志 | /admin/logs/{id} | GET | 日志详情 |
十四、总结
HoneyBox 后台管理系统是一个完整的 RBAC 权限管理系统，核心功能包括：
- 双 Token 认证：AccessToken + RefreshToken，支持无感刷新
- 图形验证码：防止暴力破解
- 多维度权限：用户 → 角色 → 菜单/权限，支持部门级和用户级专属菜单
- 动态路由：根据用户权限动态生成前端路由
- 操作日志：完整记录用户操作行为
- 按钮级权限：前后端双重权限校验