Spring Boot如何高效向React传递用户角色？

核心优化思路 #

两步请求的弊端是额外增加了HTTP开销，最合理的优化方向是将用户角色信息与JWT令牌一次性返回，推荐两种实现方式：

方案1：将角色嵌入JWT的Payload中 #

JWT本身支持自定义声明（Claims），可以直接把角色信息写入令牌的Payload部分，前端解析令牌即可获取角色，无需二次请求。

Spring Boot 后端修改 #

@RestController
@CrossOrigin(origins = "http://localhost:3000")
@RequestMapping("/login")
public class LoginController {
    // ... 省略用户校验、密钥配置等基础代码

    @PostMapping("/authentication")
    public ResponseEntity<?> authenticate(@RequestBody User user) {
        // 实际业务中从数据库/缓存获取用户真实角色
        String userRole = "ADMIN";

        // 创建JWT声明，添加角色字段
        Claims claims = Jwts.claims().setSubject(user.getUsername());
        claims.put("role", userRole);

        // 生成带角色信息的JWT令牌
        String jwtToken = Jwts.builder()
                .setClaims(claims)
                .setExpiration(new Date(System.currentTimeMillis() + 3600000)) // 1小时过期
                .signWith(SignatureAlgorithm.HS512, "your-secret-key") // 替换为实际密钥
                .compact();

        return ResponseEntity.ok()
                .header(HttpHeaders.AUTHORIZATION, "Bearer " + jwtToken)
                .header(HttpHeaders.ACCESS_CONTROL_EXPOSE_HEADERS, "Authorization")
                .build();
    }
}

React 前端修改 #

const login = () => {
    fetch(SERVER_URL + 'login/authentication', {
        method: 'POST',
        headers: { 'Content-Type':'application/json' },
        body: JSON.stringify(user)
    })
    .then(res => {
        const jwtToken = res.headers.get('Authorization');
        
        if (jwtToken !== null) {
            sessionStorage.setItem("jwt", jwtToken);
            setAuth(true);
            
            // 解析JWT Payload获取角色（JWT由三部分组成，中间部分是base64编码的Payload）
            const [, payloadBase64] = jwtToken.split('.');
            const payload = JSON.parse(atob(payloadBase64));
            sessionStorage.setItem("userRole", payload.role);
        } else {
            setOpen(true);
        }
    })
    .catch(err => console.error(err));
}

方案2：在登录接口响应体中同时返回令牌和角色 #

如果不想解析JWT，也可以直接在登录接口的JSON响应体中同时返回令牌和角色信息，前端直接读取即可。

Spring Boot 后端修改 #

@RestController
@CrossOrigin(origins = "http://localhost:3000")
@RequestMapping("/login")
public class LoginController {
    // ... 省略基础代码

    @PostMapping("/authentication")
    public ResponseEntity<?> authenticate(@RequestBody User user) {
        String userRole = "ADMIN";
        String jwtToken = Jwts.builder()
                .setSubject(user.getUsername())
                .setExpiration(new Date(System.currentTimeMillis() + 3600000))
                .signWith(SignatureAlgorithm.HS512, "your-secret-key")
                .compact();

        // 构造包含令牌和角色的响应体
        Map<String, String> response = new HashMap<>();
        response.put("token", "Bearer " + jwtToken);
        response.put("role", userRole);

        return ResponseEntity.ok(response);
    }
}

React 前端修改 #

const login = () => {
    fetch(SERVER_URL + 'login/authentication', {
        method: 'POST',
        headers: { 'Content-Type':'application/json' },
        body: JSON.stringify(user)
    })
    .then(res => res.json())
    .then(data => {
        if (data.token) {
            sessionStorage.setItem("jwt", data.token);
            sessionStorage.setItem("userRole", data.role);
            setAuth(true);
        } else {
            setOpen(true);
        }
    })
    .catch(err => console.error(err));
}

方案对比 #

• 方案1：符合JWT设计初衷，角色信息随令牌绑定，无需额外存储，但注意JWT的Payload是Base64编码（非加密），不要存放敏感信息，角色这类权限标识完全适用。
• 方案2：更直观，无需前端解析JWT，但后续如果需要从令牌中获取其他用户信息，仍需解析。

内容的提问来源于stack exchange，提问作者bykostya