我们正在用 react js 开发一个 web 应用程序，并使用 Odoo 作为后端。
我的网络应用将托管在 abc.com，后端位于 xyz.com。
现在，当我在后端调用登录 API 时，它会给出一个 JWT 令牌作为响应。现在我的问题是我们应该在哪里存储这个 JWT 令牌以供后续使用。
我发现了一些类似的问题，但我不确定它们应该存储在我的用例中的什么位置。 任何人都可以向我建议我们应该将它存储在客户端的哪个位置？
提前非常感谢！
【问题讨论】：
标签： javascript reactjs jwt odoo
您有几个选项可以存储令牌。每个选项都有其缺陷，您应该选择哪一个取决于您的具体需求和用例。很高兴知道在浏览器中没有安全的方式来存储令牌。
存储在内存中。您可以将令牌保存在脚本内存中的变量中。使用 XSS 攻击很难窃取令牌，但每次用户刷新页面时都需要一个新令牌。
存储在本地存储中。这使您可以在用户刷新页面时重用令牌。但是，使用此选项，XSS 攻击更容易窃取您的令牌。
存储在仅 http 的、安全的同站点 cookie 中。这目前被认为是 SPA 最安全的选项，但在这种情况下，您将无法直接从 SPA 设置 Authorization 标头，您只能依靠浏览器将安全 cookie 添加到您的请求中。这意味着，您可能需要一些额外的后端组件，这些组件将从 cookie 中提取令牌（并可能首先将它们放入这些 cookie 中）。这通常被称为 Token Handler 组件，或 Backend-for-Frontend。如果这是您需要的安全级别，您可以查看我们在 Curity 所做的此类 BFF 的示例实现：https://curity.io/resources/learn/back-end-for-front-end/
还可以观看 Philippe de Ryck 制作的关于浏览器中令牌安全性的精彩视频：https://pragmaticwebsecurity.com/talks/xssoauth.html
【讨论】：
您可以将获得的令牌存储在 cookie 中。如果你的请求使用 axios 库，你可以在 axios 的拦截器中设置要处理的令牌
export function getToken() {
for (const i in TokenKey) {
if (Cookies.get(TokenKey[i])) return Cookies.get(TokenKey[i])
}
service.interceptors.request.use(
config => {
const token = getToken() || store.getters.token
if (token) {
config.headers['Authorization'] = token
}
return config
},
error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
}
)
【讨论】：