React中auth头中的令牌存储位置

Question

我目前正在开发一款中等规模的应用程序，学习React已经一个月了。我已经到了需要对用户进行身份验证的部分。我已经写了一些代码，它正在工作，但我不知道它是否足够安全。当我的用户登录时，他们会被分配一个JWT令牌，如下所示：

await axios.post(APIbase + '/login', {
username: username, password: password
}).then(res=>{
const token = res.data.token;
localStorage.setItem('token', token);
}).catch(err => {
console.log(err);
});

然后，当用户向服务器发出请求时，它会通过如下的auth头发送令牌：

const token = localStorage.getItem('token');
const headers = { Authorization: `Bearer ${token}`};
const detailResult= await axios.get(API.base + API.details, {
headers:headers});

这足够安全吗？我听说这不是一个很好的做法，但我不确定我到底应该做什么

Answer 1

本地存储通常用于此类令牌，但请记住，页面上的任何JS都可以访问本地存储。如果您有任何第三方代码，它只需读取本地存储即可访问令牌。

如果您想要更安全的存储方式，可以使用HTTPonly、securecookie。这样，JS将无法访问它，它也将在任何请求中自动发送到API，但它需要在服务器上进行更改以实现cookie，而不是Authorization头。

您还可以在服务器处理会话时使用BFF(后端对前端(方法，然后您也不需要将令牌存储在客户端(并且只存储在链接到会话的BFF上(，而是将其用于从BFF向API的请求。

安全是一个复杂的领域，需要权衡取舍。每个用例都没有一个正确的答案。

这确实属于react域，但这是一个更测试版的问题，对此有一个特殊的堆栈交换：https://security.stackexchange.com/