Ajax登录认证获取Token后，如何携带Token重定向至首页？

你的核心问题有两个：

1. 多余的AJAX请求：不需要先通过AJAX获取首页内容再跳转，这一步完全没必要，反而增加了不必要的请求开销。
2. 跳转时未携带认证信息：window.location.replace("/home") 是浏览器发起的全新GET请求，不会自动带上你在AJAX请求里设置的Authorization请求头，导致后端无法识别你的认证状态，跳转后无法正常访问首页。

最优解决方案（Cookie存储Token） #

把Token存入Cookie，浏览器在跳转同域页面时会自动携带Cookie，后端可以从Cookie中读取Token完成认证，这是最符合HTTP认证规范的做法。

修改代码： #

1. 更新saveAuthData函数，将Token写入Cookie：

function saveAuthData(token) {
  // 设置Cookie，path=/确保全站路径都能访问，SameSite=Lax防止CSRF，可按需添加有效期
  document.cookie = `Authorization=Bearer ${token}; path=/; SameSite=Lax; secure`;
  // 注：secure参数仅在HTTPS环境下生效，本地开发可去掉
}

2. 删除多余的AJAX请求/home的代码，登录成功后直接跳转：

function login(email, password){
    $.ajax({
        url: "/authentication/authenticate", 
        type:'POST', 
        data: JSON.stringify({ "email": email, "password": password }), 
        headers: {"Content-Type":"application/json"},
        success: function(result){ 
            token = result;
            alert("success "+token);
            saveAuthData(token);
            // 直接跳转，浏览器自动携带Cookie中的认证信息
            window.location.replace("/home");                
        },
        error: function(result){ alert("error "+result.statusText);}
    });
}

3. 后端调整：修改认证逻辑，从Cookie中读取Authorization值进行Token验证。

备选方案（URL参数传递Token，不推荐） #

如果无法修改后端Cookie认证逻辑，可临时用URL参数传递Token（注意：Token会暴露在地址栏、浏览器历史和服务器日志中，安全性差，仅适合测试场景）：

success: function(result){ 
    token = result;
    alert("success "+token);
    saveAuthData(token);
    // 编码Token后拼接到URL
    window.location.replace(`/home?token=${encodeURIComponent(token)}`);                
}

后端需调整为从URL参数token中读取认证信息。

注意事项 #

• 不要用localStorage存储Token来做页面跳转认证：因为浏览器跳转后，首页的JS还未执行时，后端已经完成认证拦截，无法读取localStorage中的Token。
• 生产环境建议使用HTTPS，并给Cookie添加secure和HttpOnly（如果不需要前端读取Token）属性，提升安全性。

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