如何正确处理标头中的 JWT

Posted 2023-03-10

【中文标题】如何正确处理标头中的 JWT

【英文标题】：How to properly deal with JWT in headers

【发布时间】：2021-10-12 23:59:14

【问题描述】：

我正在尝试在我的项目中设置 JWT（NodeJs Express 用于后端，javascript 用于前端）。

所以在我的后端，当用户登录时，我会这样发送我的令牌：

[...]
     return res.send( token, id: userId )
[...]

在我的前端，我在我的标头中设置了 Bearer 令牌，如下所示：

const data = 
        email,
        password
    

    await instance.post('/signin', data)
        .then((res) => 
                instance.defaults.headers.common['authorization'] = `Bearer $res.data.token`
                window.location = './account.html'
        )
        .catch((err) => console.log(err))

我的问题是：

我做对了吗？ 当我被重定向到 account.html 页面时，如何检索在登录时设置的令牌？

【问题讨论】：

通常您会在 JWT 本身中对用户 ID 进行编码，不需要也不建议在发送令牌时公开用户 ID。考虑在 Express 中使用中间件来检查每个传入请求的令牌（在 httpOnly cookie 中），而不是在路由到路由的基础上处理它。

【参考方案1】：

当您分配给instance.defaults.headers.common['authorization'] 时，后续 请求通过 Ajax 使用来自该页面的任何库（我猜是 Axios）发出 strong> 将包含 authorization 标头。

为window.location 分配一个新值将触发导航并丢弃instance 对象（具有分配的标头值）。

（根据经验，如果您要在发出 Ajax 请求后为 window.location 分配一个新值，那么您应该将 Ajax 请求替换为常规的表单提交）。

---

您可以将数据分配到您可以在account.html 页面中读取的位置（例如本地存储）。

但是，对于account.html 本身的请求，服务器将无法使用它。

您可以将数据分配给 cookie。然后它将可用于account.html 的请求，但在 cookie 中而不是在授权标头中。

---

请注意，在授权标头中使用 JWT 通常是在单页应用程序中完成的，而不是传统的多页网站。

【讨论】：

好的...这就是原因。我不在SPA。非常感谢 ！ localStorage 存储 JWT 安全吗？

我建议将令牌存储为安全的 httpOnly cookie，而不是常规 cookie 或 localStorage。后两者的安全性要低得多，可以通过 javascript 访问。