Reactjs JWT检索每个请求或保存在redux（或等效）存储中

我正在编写一个react应用程序，并使用localStorage（目前）存储JWT

我的问题是，从localStorage检索页面加载时的令牌并在redux存储中设置是否更好？或者我应该在每次请求时从localStorage检索它

i、 e

然后在每个请求中从存储中拉入令牌，然后在请求中使用它

或者，另一个选项是在每次请求时从localStorage检索令牌：

fetchA = () => {
   const token = localStorage.getItem('token')
   fetch(url, token)
}

fetchB = () => {
   const token = localStorage.getItem('token')
   fetch(url, token)
}

---

如果一个比另一个好，就有可能给出理由。如果有任何不清楚的地方，请告诉我。

如果您将令牌存储在本地存储中，那么任何XSS攻击都可以轻松访问该令牌，任何外部用户都可以通过页面内的脚本获取令牌。您可以在redux中保存JWT令牌，但如果您希望在应用程序中共享状态，则通常使用redux

但对您的问题的一般回答是：尝试遵循jwt令牌和安全性的最佳实践。安全性的一个要点是设置令牌的到期日

---

有几个博客建议将代币存储在cookie中，它们非常安全。您可以阅读。

一般来说，redux存储与localStorage的区别在于它们的用途不同。如果您需要在应用程序中共享状态，则可以使用redux。如果您需要在浏览器缓存中持久化数据，那么localStorage就是一种方法

关于把jwt代币放在哪里，我自己也在争论。JWT的设计寿命很短，如果外部用户以某种方式获得令牌，他们使用令牌的时间有限。如果其未存储在localStorage中，则用户需要在刷新浏览器时登录。这不会给最终用户带来良好的体验

但是，如果你的应用程序需要认证，你不应该重新发明轮子。 大多数jwt提供程序都可以与OpenID连接层一起使用，并且有很多关于这方面的文档。对于您的react应用程序，我将在那个里使用。客户机使用自己的存储（WebStorageStateStore），可以将其设置为localStorage

fetchA = () => {
   const token = localStorage.getItem('token')
   fetch(url, token)
}

fetchB = () => {
   const token = localStorage.getItem('token')
   fetch(url, token)
}