磨了半个月，再接再厉（5.11~5.21）

在留家里还是再冲北京反复横跳 磨蹭了两个礼拜 终于闭环项目基座核心 （由ChatGPT总结整理）

cursor + chatgpt + trae + gemini + 豆包 不会前端 折腾完了 真的累 ，月底前完善几个业务功能 估计就能单体项目上线了。预计6月开始并发→微服务→AI 这个路线弄。加油吧 哈哈~

一、RBAC 改造前（基础项目阶段）

1️⃣ 项目基础架构

技术栈：SpringBoot3 + JDK17 + MyBatis-Plus + PostgreSQL

工作内容：

分层架构：Controller → Service → Mapper → Entity

多环境配置（开发/测试/生产）

封装统一返回结果与全局异常处理

解决问题：

项目结构混乱、接口返回不统一、异常处理无标准

2️⃣ 用户模块

用户表设计（账号、昵称、手机号、密码）

功能：注册、登录、分页查询、编辑删除、密码重置

解决问题：缺少完整账号体系与基础用户管理能力

3️⃣ 前端工程化

技术栈：React + Vite + Ant Design

功能：

前端项目搭建

路由与后台布局

Axios 全局封装

登录页与后台管理页开发

解决问题：前后端无法联调，项目无界面

4️⃣ 安全基础

登录拦截器 + CORS + 接口白名单/黑名单

实现未登录接口拦截和跨域配置

解决问题：接口裸露、未授权访问

5️⃣ 接口防刷

Redis + AOP + 自定义限流注解

功能：登录/注册接口限流、防止高频请求

解决问题：防止暴力破解密码、接口高频浪费资源

6️⃣ 登录体系升级

Token + Redis 无状态登录

弃用 Session

登录生成唯一 Token

Redis 存储 Token

拦截器统一校验

支持退出登录、Token 失效

解决问题：Session 扩展性差、状态丢失、登录统一管理难

7️⃣ 前端登录态适配

Axios 拦截器 + Token 持久化

请求自动携带 Token

Token 失效自动跳转登录页

前端统一处理登录状态

解决问题：前后端登录状态不一致、权限控制混乱

8️⃣ 部署上线

Linux + 宝塔面板 + JDK17

项目部署、守护进程、日志管理

解决问题：项目上线环境配置、服务稳定运行

二、RBAC 改造阶段（权限闭环 + 双 Token 完整体系）

1️⃣ 权限体系设计

数据库表：

sys_user、sys_role、sys_permission

关联表：sys_user_role, sys_role_permission

支持动态分配角色和权限

支持超级管理员与普通管理员区分

2️⃣ 后端权限管理

接口权限注解：@RequiresPerm

安全配置：

SecurityConfig 配置 Spring Security

JwtAuthenticationFilter 拦截请求并校验 Token

JwtUtil 生成/解析 Token

接口限流：RateLimit + Redis

操作日志记录：OperationLog

异常处理：GlobalExceptionHandler + BusinessException + ResultCode

接口文档：Knife4jConfiguration

3️⃣ 前端权限管理

权限标识文件：permissions.ts

权限动态渲染：

动态菜单

按钮权限控制

前端路由守卫

全局状态管理：

使用 Zustand 存储当前用户权限

组件通过订阅状态动态渲染权限

支持权限动态刷新和多组件共享

4️⃣ 双 Token + Token 安全

Access Token（短期）+ Refresh Token（长期）

Token 无感续期（自动刷新）

强制下线 / 账号封禁

Redis 管理在线 Token

登录/刷新/登出接口完善

5️⃣ CRUD 功能完善

用户管理、角色管理、权限管理、菜单管理

支持增删改查

确保前后端权限闭环、接口访问控制可追踪

当前项目闭环

用户登录

│

├─> Token 校验（Access + Refresh, Redis）

│

├─> RBAC 权限加载

│ ├─ 用户-角色

│ ├─ 角色-权限

│ └─ 更新前端 Zustand 全局状态

│

├─> 前端请求接口

│ ├─ JWT 校验 Token

│ ├─ 接口权限注解校验

│ └─ RateLimit 限流控制

│

├─> 操作结果

│ ├─ ResultCode 返回统一状态

│ ├─ OperationLog 记录

│ └─ 异常由 GlobalExceptionHandler 捕获

│

└─> 前端动态渲染菜单/按钮/路由（Zustand 状态驱动）

Zustand 权限改造总结

1️⃣、改造前旧方案（Context 全局状态）

权限数据来源：登录仅拿令牌，页面加载后调用 /auth/current 接口获取用户 + 权限

存储方式：React Context 上下文全局挂载权限、用户信息

权限判断：组件内读取 Context 值，校验权限编码控制按钮 / 路由

痛点：

Context 层级嵌套多，组件层层透传，性能一般

页面刷新依赖二次接口拉取权限

状态读写繁琐，多组件共享状态逻辑臃肿

2️⃣、改造后新方案（Zustand 状态管理）

权限数据来源：登录接口直接一并返回权限数组

存储方式：摒弃 Context，改用 Zustand 独立仓库统一存储权限

权限判断：封装通用权限 Hook，从 Zustand 仓库取值校验

原 /auth/current 接口：仅用来获取用户基础资料，不再读取权限字段

3️⃣、核心改造步骤

新建 Zustand 仓库

创建 auth 状态仓库，定义权限数组、修改权限的方法，全局统一管理权限状态

登录页逻辑调整

登录成功后，直接从响应里取出 permissions 权限列表

调用仓库方法存入 Zustand，页面首次进入就完成权限初始化

布局页面精简逻辑

保留 /auth/current 获取昵称、头像、角色 ID 等基础信息

删除从该接口读取权限的代码，不再二次赋值权限

权限判断逻辑替换

所有按钮、路由权限校验处，从读取 Context 改为调用封装好的 Zustand 权限 Hook

路由适配修复

修正路由权限读取报错

权限编码直接匹配仓库数据，解决白屏、按钮隐藏问题

4️⃣ 、改造前后对比

对比项 旧 Context 方案 新 Zustand 方案

权限获取 登录后二次接口拉取 登录一次性获取存入状态

状态共享 嵌套透传，耦合度高 独立仓库，任意组件直接取值

刷新体验 刷新重发接口拿权限 登录已存权限，无需重复请求

代码简洁度 层级冗余 逻辑轻量化，读写简单

接口改动 无需改接口 后端登录接口附带权限即可，原接口无需删减字段

5️⃣、最终运行流程

用户登录 → 后端返回令牌 + 用户信息 + 完整权限

前端登录页 → 将权限存入 Zustand 仓库

进入主页布局 → 仅拉取用户基础资料，不处理权限

页面 / 按钮渲染 → 调用 Hook 读取仓库权限，自动判断展示与否

退出登录 → 清空 Zustand 权限与本地缓存，跳转登录页