如何携带请求头实现页面重定向？登录Post接口请求后带Authorization头跳转页面的技术问题

看起来你遇到的核心矛盾很明确：

• 用Ajax携带Authorization头请求页面接口时，只能拿到HTML字符串，但没法触发浏览器的页面跳转和正常渲染（因为你只是发起了请求，没有对响应内容做展示处理）；
• 直接用window.location跳转时，浏览器发起的是普通GET请求，不会自动继承Ajax请求里的自定义头，导致后端认证失败返回401。

本质原因是：浏览器的普通导航请求不会携带你在Ajax中手动设置的Authorization头，而你的后端是基于JWT的Bearer令牌做权限校验的，必须在请求中携带令牌才能通过验证。

针对你的Thymeleaf服务器渲染场景，推荐两种可行方案，优先选方案一（安全性更高、适配传统项目架构）：

方案一：将JWT存入HttpOnly Cookie（推荐） #

这是最适合传统服务器渲染项目的方案，浏览器会自动在所有同域请求中携带Cookie，包括页面跳转的请求，无需前端手动处理令牌传递。

1. 修改后端登录接口 #

登录成功生成JWT后，把令牌存入HttpOnly类型的Cookie中（防止XSS攻击窃取令牌）：

// 示例登录接口处理逻辑
@PostMapping("/api/auth/login")
public ResponseEntity<?> login(@RequestBody LoginRequest loginRequest, HttpServletResponse response) {
    // 验证用户信息，生成JWT令牌
    String jwtToken = jwtUtil.generateToken(loginRequest.getEmail());
    
    // 创建HttpOnly Cookie
    Cookie jwtCookie = new Cookie("auth-token", jwtToken);
    jwtCookie.setHttpOnly(true); // 关键：禁止前端JS读取，提升安全性
    jwtCookie.setPath("/"); // 所有路径都携带该Cookie
    jwtCookie.setMaxAge(24 * 60 * 60); // 有效期1天
    response.addCookie(jwtCookie);
    
    // 返回用户角色信息（无需返回token，因为已存入Cookie）
    return ResponseEntity.ok(Map.of("role", user.getRole()));
}

2. 调整后端认证逻辑 #

修改你的JWT认证过滤器，支持从Cookie中读取令牌进行验证（保留原有的Authorization头读取逻辑，兼容接口请求）：

// Spring Security JWT过滤器示例
public class JwtAuthenticationFilter extends OncePerRequestFilter {
    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
        String jwtToken = null;
        
        // 先从Cookie中获取令牌
        Cookie[] cookies = request.getCookies();
        if (cookies != null) {
            for (Cookie cookie : cookies) {
                if ("auth-token".equals(cookie.getName())) {
                    jwtToken = cookie.getValue();
                    break;
                }
            }
        }
        
        // 如果Cookie中没有，再从Authorization头读取
        if (jwtToken == null) {
            String authHeader = request.getHeader("Authorization");
            if (authHeader != null && authHeader.startsWith("Bearer ")) {
                jwtToken = authHeader.substring(7);
            }
        }
        
        // 后续令牌验证、设置认证信息的逻辑...
    }
}

3. 简化前端登录代码 #

登录成功后直接根据角色跳转即可，无需再发起第二个Ajax请求：

$(document).ready(function (){
    $("#form-login").submit(function (event){
        event.preventDefault();
        let $form = $(this),
            email = $form.find("input[name='email']").val(),
            password = $form.find("input[name='password']").val();
        loginPost(email, password);
    })
    
    function loginPost(email, password) {
        $.ajax({
            url:"/api/auth/login",
            type:"POST",
            // 移除async:false，避免阻塞浏览器主线程导致页面假死
            data: {email, password},
            success: function (data) {
                let urlLogin = data["role"] === "ROLE_USER" ? "/api/user" : "/api/admin";
                window.location.href = urlLogin; // 直接跳转，浏览器会自动携带Cookie
            },
            error: function(xhr) {
                // 处理登录失败逻辑，比如提示用户名密码错误
                alert(xhr.responseJSON?.message || "登录失败");
            }
        })
    }
});

方案二：将JWT存入localStorage，配合前端页面替换（适合单页应用，不推荐传统渲染） #

如果你的项目是单页应用（SPA），可以将令牌存入localStorage，然后通过Ajax获取页面内容并替换当前页面，但这种方式适配性较差，仅适合纯Ajax渲染的场景：

success: function (data) {
    localStorage.setItem("auth-token", data["token"]);
    let urlLogin = data["role"] === "ROLE_USER" ? "/api/user" : "/api/admin";
    // 用Ajax获取页面内容并替换当前页面
    $.ajax({
        url:urlLogin,
        type:"GET",
        headers: { "Authorization": "Bearer "+localStorage.getItem("auth-token") },
        success: function(pageHtml) {
            $("body").html(pageHtml); // 替换当前页面内容
            // 手动同步浏览器URL（可选）
            history.pushState({}, "", urlLogin);
        }
    })
}

这种方式的缺点是：浏览器URL和页面状态容易不同步，刷新页面后需要重新验证令牌，体验不如方案一。

• 禁止使用async:false：它会阻塞浏览器主线程，导致页面假死，严重影响用户体验，改用异步回调或Promise处理即可。
• 令牌过期处理：无论哪种方案，都要在后端处理令牌过期的情况，返回401时前端自动跳转到登录页面。

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