用户模块设计

在Spring Boot + Vue的前后端分离项目中，优雅设计用户模块需要从鉴权机制、权限粒度控制、数据安全和扩展性四个维度综合考虑。以下是结合多个实践案例（如若依框架、vue-element-admin等）的系统性设计方案：

---

一、后端设计：基于Spring Security + JWT的鉴权体系

1. RBAC模型设计
   • 核心表：用户表（sys_user）、角色表（sys_role）、权限表（sys_permission）、用户角色关联表、角色权限关联表[12][31]。
   • 接口权限：通过注解@PreAuthorize("hasAuthority('user:add')")控制方法级别的权限校验，与数据库中的权限标识（如user:add）动态绑定[12]。
2. JWT令牌管理
   • 登录成功后生成JWT，包含用户ID、角色、权限列表等信息，通过Authorization头传递。
   • 使用Spring Security的OncePerRequestFilter验证Token有效性，并解析权限信息到SecurityContext[31]。
3. 数据权限控制
   • 在数据查询时，通过自定义注解（如@DataScope）动态拼接SQL的WHERE条件，例如根据用户所属部门过滤数据[12][19]。

---

二、前端设计：动态路由与精细化权限控制

1. 登录与Token管理
   • 登录成功后，将Token存储到localStorage或sessionStorage，并通过Vuex持久化用户信息[1][14]。
   • 全局路由守卫（router.beforeEach）校验Token，未登录则跳转至登录页[16]。
2. 菜单权限动态生成
   • 后端返回用户可访问的菜单列表（树形结构），前端通过vue-router的addRoutes动态注册路由。例如，管理员可见/admin路径，普通用户不可见[7][21]。
   • 侧边栏组件根据权限数据递归渲染菜单项，使用v-if或el-menu的动态属性控制显示[3]。
3. 按钮级权限控制
   • 自定义指令v-permission，根据后端返回的权限列表（如['user:delete']）控制按钮显隐：
   • 或通过全局方法hasPermission校验权限标识[2][12]。

<el-button v-permission="'user:delete'">删除</el-button>

三、接口与数据规范

1. 统一响应格式

{
  "code": 200,
  "message": "success",
  "data": { ... }
}

异常时返回401（未授权）、403（无权限）等标准状态码[31]。
2. 安全性增强
- 敏感接口（如密码修改）强制HTTPS传输。
- 密码使用BCrypt加密存储，避免明文传输[5][27]。

---

四、扩展性与维护性设计

1. 权限管理模块
   • 提供角色管理界面，支持角色与权限的灵活配置（如图形化权限树）[20]。
   • 审计日志记录用户操作，便于追踪异常行为[5]。
2. 多因素认证（MFA）
   • 集成短信、邮箱或TOTP（如Google Authenticator）作为二次验证手段，提升安全性[26]。

---

五、参考实现方案

• 若依框架：完整的RBAC实现，包含动态菜单、按钮权限和数据权限[12]。
• vue-element-admin：通过permission.js控制动态路由，结合角色生成侧边栏[21][24]。

---

关键代码示例

后端（Spring Boot）

// 登录接口
@PostMapping("/login")
public Result login(@RequestBody User user) {
    String token = jwtUtil.generateToken(user.getUsername());
    return Result.success(token);
}

// 权限注解
@GetMapping("/users")
@PreAuthorize("hasAuthority('user:list')")
public Result listUsers() { ... }

前端（Vue）

// 动态路由注册
const routes = await getAsyncRoutes(); // 从后端获取权限路由
router.addRoutes(routes);

// 自定义权限指令
Vue.directive('permission', {
    inserted: (el, binding) => {
        if (!store.getters.permissions.includes(binding.value)) {
            el.parentNode.removeChild(el);
        }
    }
});

通过以上设计，可实现高内聚、低耦合的用户模块，同时兼顾安全性与扩展性。实际开发中需根据项目规模调整复杂度，例如中小型项目可简化数据权限设计，大型系统需结合更细粒度的控制策略。