Node.js Express后端与前端JavaScript项目中JWT头部处理正确性验证及页面跳转后令牌获取方法问询

嘿，让我来帮你梳理这两个关于JWT认证的技术疑问：

1. 当前的JWT头部处理实现是否正确？ #

你的前端代码里设置Authorization请求头的方式是正确的！

JWT的Bearer令牌规范要求请求头格式为：

Authorization: Bearer <your-jwt-token>

你代码里的这行：

instance.defaults.headers.common['authorization'] = `Bearer ${res.data.token}`

完全符合这个规范，只要你的后端能正确解析这个头部（比如通过req.headers.authorization提取出Bearer 后面的token字符串，再进行验证），这部分的实现就没问题。

不过有个小提醒：如果你的instance是全局的axios实例，这样设置后所有后续请求都会带上这个认证头，要是有不需要认证的接口（比如首页、注册页），可能需要单独处理，避免不必要的头信息。

2. 页面跳转到account.html后，如何获取登录阶段设置的令牌？ #

这里要注意：页面跳转后，之前在原页面JavaScript内存中设置的axios实例头会丢失——因为每个页面的JavaScript运行环境是独立的，新页面的instance是重新初始化的，不会继承之前的设置。

解决办法是把令牌存储到浏览器持久化存储中，具体步骤如下：

第一步：登录成功时存储令牌 #

在登录接口的then回调里，除了设置axios头，还要把token存到localStorage或者sessionStorage：

await instance.post('/signin', data)
  .then((res) => {
    // 存储令牌到localStorage（持久化，关闭浏览器也保留）
    localStorage.setItem('authToken', res.data.token);
    localStorage.setItem('userId', res.data.id);
    // 或者用sessionStorage（会话级，关闭浏览器就清除）
    // sessionStorage.setItem('authToken', res.data.token);
    
    // 设置当前页面的axios头
    instance.defaults.headers.common['authorization'] = `Bearer ${res.data.token}`;
    window.location = './account.html';
  })
  .catch((err) => console.log(err));

第二步：在account.html中读取并恢复令牌 #

在account.html的初始化脚本里，读取存储的令牌，重新设置到axios实例的请求头：

// 假设这里重新创建了axios实例instance
const token = localStorage.getItem('authToken');
if (token) {
  instance.defaults.headers.common['authorization'] = `Bearer ${token}`;
  // 也可以同时获取userId
  const userId = localStorage.getItem('userId');
  // 后续业务逻辑中使用userId
}

关于存储方式的选择： #

• localStorage：令牌会持久保存在浏览器中，下次打开网站还能直接用，适合“记住我”的场景，但要注意XSS攻击的风险（如果页面有漏洞，恶意脚本可能窃取令牌）。
• sessionStorage：令牌只在当前会话有效，关闭浏览器就清除，安全性稍高，但用户刷新页面或者重新打开标签页需要重新登录。

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