SpringBoot登录如何将Bearer Token从响应头改为响应体返回

修改方案 #

无需调整的部分 #

• AuthorizationFilter类：该类的作用是校验后续业务请求携带的token，逻辑仍然是从请求头的Authorization字段读取，完全不需要改动
• 现有业务接口的授权校验逻辑无需调整，前端后续请求仍然需要把token放到Authorization: Bearer xxx请求头中携带

1. 调整AuthenticationFilter的登录成功逻辑 #

修改successfulAuthentication方法，将原本写入响应头的token改为写入JSON响应体，示例代码如下：

@Override
protected void successfulAuthentication(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain, Authentication authentication) throws IOException {
    String token = Jwts.builder()
            .setSubject(((User) authentication.getPrincipal()).getUsername())
            .setExpiration(new Date(System.currentTimeMillis() + 864_000_000))
            .signWith(SignatureAlgorithm.HS512, "SecretKeyToGenJWTs".getBytes())
            .compact();
    // 配置响应格式为JSON
    response.setContentType("application/json;charset=UTF-8");
    // 构造响应体内容，可根据需要扩展字段
    Map<String, Object> resBody = new HashMap<>();
    resBody.put("code", 200);
    resBody.put("msg", "登录成功");
    resBody.put("token", "Bearer " + token);
    resBody.put("username", ((User) authentication.getPrincipal()).getUsername());
    // 写入响应
    new ObjectMapper().writeValue(response.getWriter(), resBody);
    // 原有写入响应头的代码可以删除
    // response.addHeader("Authorization","Bearer " + token);
}

注意需要给方法补充抛出IOException的声明。

2. 修复注册接口的返回值 #

当前signup方法返回void，前端调用后执行response.json()会因为无响应体报错，调整为返回JSON结构即可：

@PostMapping("/signup")
public Map<String, Object> signUp(@RequestBody User user) {
    user.setPassword(bCryptPasswordEncoder.encode(user.getPassword()));
    userRepository.save(user);
    System.out.println(user.getUsername() + " SAVED SUCCESSFULLY");
    Map<String, Object> res = new HashMap<>();
    res.put("code", 200);
    res.put("msg", "注册成功");
    res.put("username", user.getUsername());
    return res;
}

3. 调整React端登录逻辑 #

将原本读取响应头的逻辑改为读取响应体中的token，可将token存储到本地缓存供后续请求使用：

componentDidMount() {
    const payload = {
        "username": "hikaru",
        "password": "JohnSmith72-"
    };
    // 注册请求
    fetch(SIGNUP_URL, {
        method: 'POST',
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json"
        },
        body: JSON.stringify(payload)
    })
        .then(response => response.json())
        .then((data) => {
            console.log("注册结果：", data);
        });
    // 登录请求
    fetch(LOGIN_URL, {
        method: 'POST',
        headers: {
            "Accept": "application/json",
            "Content-Type": "application/json"
        },
        body: JSON.stringify(payload)
    })
        .then(response => response.json())
        .then(data => {
            console.log("登录返回token：", data.token);
            // 存储token到本地缓存
            if(data.token) {
                localStorage.setItem("auth_token", data.token);
                this.setState({isAuthenticated: true});
            }
        });
}

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