如何正确处理报头中的JWT

Question

我试图在我的项目中设置JWT(后端为NodeJs Express，前端为Javascript)。

在我的后端，我像这样发送令牌当用户登录时:

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

在前端，我在header中设置了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页面时，我如何检索登录时设置的令牌?

Answer 1

当分配给instance.defaults.headers.common['authorization']时，随后的通过Ajax发出的请求使用该页面中的库(我猜是Axios)将包括authorization标头。

给window.location赋一个新值将触发导航并丢弃instance对象(带有指定的标头值)。

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

---

您可以将数据分配到account.html页面中可以读取的地方(例如本地存储)。

对于account.html本身的请求，服务器将不可用。

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

---

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