JWT授权存储位置及请求头Authorization设置问题咨询

一、如何让请求携带 Authorization 头（使 req.headers['authorization'] 有值） #

你当前打印 req.headers['authorization'] 得到 undefined，是因为客户端在发起后续请求时，没有把获取到的 Token 放到请求头里。后端的 req.headers 是客户端请求时携带过来的，不是后端自己填充的。

正确流程是：

1. 客户端通过登录接口获取后端返回的 Token（即你用 res.json({token}) 返回的内容）；
2. 客户端在发起需要授权的请求时，手动在请求头中添加 Authorization 字段，格式必须是 Bearer <你的Token>（注意 Bearer 和 Token 之间有空格）。

举几个常见前端请求的示例：

Axios 示例 #

// 登录获取 Token
axios.post('/login', { username: 'xxx', password: 'xxx' })
  .then(res => {
    const token = res.data.token;
    // 后续请求携带 Token
    axios.get('/protected/api', {
      headers: {
        'Authorization': `Bearer ${token}`
      }
    });
  });

Fetch 示例 #

// 登录获取 Token
fetch('/login', {
  method: 'POST',
  body: JSON.stringify({ username: 'xxx', password: 'xxx' }),
  headers: { 'Content-Type': 'application/json' }
})
.then(res => res.json())
.then(data => {
  const token = data.token;
  // 后续请求携带 Token
  fetch('/protected/api', {
    method: 'GET',
    headers: {
      'Authorization': `Bearer ${token}`
    }
  });
});

这样后端的 verifyToken 中间件就能从 req.headers['authorization'] 中拿到正确的 Token 了。

二、授权用的 JWT 应该存储在哪里？ #

根据安全性和业务需求，常见的存储方案有三种：

• LocalStorage/SessionStorage

  • 优点：存取简单，前端可以直接读写，无需后端配合；
  • 缺点：容易遭受 XSS 攻击，恶意脚本可以直接获取 Token 并发起伪造请求，适合对安全性要求不高的场景。

• HttpOnly Cookie

  • 优点：安全性高，前端 JS 无法访问（避免 XSS），还可以设置 Secure（仅 HTTPS 传输）、SameSite（防止 CSRF）、Max-Age（控制过期时间）等属性；
  • 缺点：跨域请求时需要配置 CORS 的 withCredentials: true，后端也要允许携带 Cookie，适合对安全性要求高的场景。

• 前端内存（如 Vuex/Redux 状态）

  • 优点：完全避免 XSS 风险，页面刷新后 Token 自动丢失，减少被盗用的时间窗口；
  • 缺点：用户刷新页面后需要重新登录，体验稍差，适合对安全性要求极高的场景。

三、你的验证中间件存在的问题及修正 #

原代码中 jwt.verify 验证失败时会抛出异常，而不是返回 false，直接用 if 判断会导致服务器崩溃。修正后的版本加入了异常捕获，还可以把解码后的用户信息挂载到 req 对象上，方便后续路由使用：

function verifyToken(req, res, next){
  const authHeader = req.headers['authorization']
  const token = authHeader && authHeader.split(' ')[1]

  if (token == null) return res.sendStatus(401); // No token provided

  try {
    // 验证 Token 并解码
    const decodedUser = jwt.verify(token, process.env.JWT_SECRET);
    // 将解码后的用户信息挂载到 req 上，后续路由可直接使用 req.user
    req.user = decodedUser;
    next();
  } catch (error) {
    // Token 过期、签名错误等情况，返回 403 禁止访问
    return res.sendStatus(403);
  }
}

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