Reactjs 在React JS应用程序中，在何处存储JWT令牌和用户id？

我的应用程序前端包含React JS，后端包含Fast Api。我使用令牌身份验证并生成JWT令牌并发送回客户端，我将JWT令牌和用户id存储在客户端（本地存储），并且必须随每个请求一起发送令牌

代码

---

但我在某个地方读到，本地存储不安全。还有很多我提到的帖子，但我没有得到正确的方法。任何建议都会有帮助

Cookie是最好的选择，因为除了本地存储或会话存储之外，您可以在Cookie中拥有更精细的研磨控制。其中一些是-

到期日

您可以定义cookie的生存期

Set-Cookie: id=a3fWa; Expires=Thu, 31 Oct 2021 07:28:00 GMT;

限制访问

具有安全属性的cookie仅通过HTTPS协议通过加密请求发送到服务器，而不使用不安全的HTTP（本地主机上除外），因此中间人攻击者无法轻松访问

Set-Cookie: id=a3fWa; Expires=Thu, 21 Oct 2021 07:28:00 GMT; Secure; HttpOnly

SameSite属性

SameSite属性允许服务器要求cookie不应与跨源请求一起发送（其中站点由可注册域定义），这为跨站点请求伪造攻击（CSRF）提供了一些保护

---

谢谢您的回复。我应该把饼干放在哪里？在后端还是在前端？在我的例子中，它应该包含JWT令牌和用户id吗？您可以将JWT存储在前端（React）应用程序的cookie中，并可以使用axios全局变量将其设置为标头。通过这种方式，您不需要将它附加到您在服务器响应中从UISo发出的每个请求上，我应该附加cookie，对吗？那么，如何在前端设置？自动？当您成功登录时，您将收到一个JWT令牌，将该令牌存储到您的帐户中的cookie中app@AaminKhan我正在采用你建议的方法，但我有一个疑问。我在从服务器发送到客户端的cookie中使用httpOnly标志。我读到它可以防止XSS攻击。因此，如果设置了httpOnly标志，如何在前端（客户端）访问jwt？我可以使用

axios.deaults.headers.common

在第一次登录时收到响应后进行设置。但如果用户刷新或在新选项卡中打开应用程序，我会松开该标题，用户将注销。

Set-Cookie: id=a3fWa; Expires=Thu, 21 Oct 2021 07:28:00 GMT; Secure; HttpOnly

Set-Cookie: mykey=myvalue; SameSite=Strict