我们正在使用react js开发一个web应用程序，并使用Odoo作为后端。
我的web应用程序将托管在abc.com和后端是在xyz.com。
现在，当我在后台调用登录API时，它会给出一个JWT令牌作为响应。现在我的问题是我们应该在哪里存储这个JWT令牌以供后续使用。
我发现了一些类似的问题，但我不确定它们应该存储在我的用例中。谁能告诉我客户端应该放在哪里?
提前感谢!
您有几个选项可以存储令牌。每个选项都有其缺陷，您应该选择哪一个取决于您的具体需求和用例。最好知道在浏览器中没有安全的方法来存储令牌。
-
存储在内存中。您可以将标记保存在脚本内存中的一个变量中。通过XSS攻击很难窃取令牌，但是每次用户刷新页面时都需要一个新的令牌。
-
本地存储。这使您可以在用户刷新页面时重用令牌。然而，使用此选项，XSS攻击更容易窃取您的令牌。
-
存储在httponly，安全的，同一站点cookie中。这目前被认为是SPA最安全的选项，但在这种情况下，您将无法直接从SPA设置
Authorization标头，您只能依赖浏览器将安全cookie添加到您的请求中。这意味着，您可能需要一些额外的后端组件，这些组件将从cookie中提取令牌(并可能首先将它们放入这些cookie中)。这通常被称为令牌处理程序组件或后端换前端组件。如果这是您需要的安全级别，您可以查看我们在security中实现的BFF示例:https://curity.io/resources/learn/token-handler-spa-example/
还可以看看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)
}
)