在React JS应用程序中，JWT令牌和用户id存储在哪里

Question

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

代码

export const handleAuthentication = (data) => {
localStorage.setItem("userID", data.user_id);
localStorage.setItem("subID", data.user_sub);
localStorage.setItem("access_token", data.access_token);
localStorage.setItem("refresh_token", data.refresh_token);
localStorage.setItem("is_authenticated", "true");
localStorage.setItem("session_expired", "false");
window.location.replace("/success");
};

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

Answer 1

Cookie是最好的选择，因为除了LocalStorage或SessionStorage之外，您还可以在Cookie中进行更精细的控制。其中一些是

到期

您可以定义cookie 的使用寿命

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

限制访问

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

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

SameSite属性

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

Set-Cookie: mykey=myvalue; SameSite=Strict

https://dev.to/rdegges/please-stop-using-local-storage-1i04

https://developer.mozilla.org/en-US/docs/Web/HTTP/Cookies