在 React JS 应用程序中的何处存储 JWT 令牌和用户 ID？
Where to store a JWT Token and user id in a React JS application?
我的应用程序在前端包含 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");
};
但我在某处读到本地存储不安全。我也提到了很多帖子，但我没有得到正确的方法。任何建议都会有所帮助！
Cookie 是最好的选择，因为除了 LocalStorage 或 SessionStorage 之外，您可以在 cookie 中进行更精细的控制。其中一些是 -
到期
您可以定义 cookie 的生命周期
Set-Cookie: id=a3fWa; Expires=Thu, 31 Oct 2021 07:28:00 GMT;
限制访问
具有安全属性的 cookie 仅通过 HTTPS 协议通过加密请求发送到服务器，从不通过不安全的 HTTP（本地主机除外）发送，因此 [=39= 无法轻松访问] 攻击者
Set-Cookie: id=a3fWa; Expires=Thu, 21 Oct 2021 07:28:00 GMT; Secure; HttpOnly
SameSite 属性
SameSite 属性允许服务器要求 cookie 不应与 cross-origin 请求一起发送（其中 Site 由可注册域定义），这提供了一些针对 cross-site 请求伪造攻击的保护(CSRF).
Set-Cookie: mykey=myvalue; SameSite=Strict
我的应用程序在前端包含 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");
};
但我在某处读到本地存储不安全。我也提到了很多帖子，但我没有得到正确的方法。任何建议都会有所帮助！
Cookie 是最好的选择，因为除了 LocalStorage 或 SessionStorage 之外，您可以在 cookie 中进行更精细的控制。其中一些是 -
到期
您可以定义 cookie 的生命周期
Set-Cookie: id=a3fWa; Expires=Thu, 31 Oct 2021 07:28:00 GMT;
限制访问
具有安全属性的 cookie 仅通过 HTTPS 协议通过加密请求发送到服务器，从不通过不安全的 HTTP（本地主机除外）发送，因此 [=39= 无法轻松访问] 攻击者
Set-Cookie: id=a3fWa; Expires=Thu, 21 Oct 2021 07:28:00 GMT; Secure; HttpOnly
SameSite 属性
SameSite 属性允许服务器要求 cookie 不应与 cross-origin 请求一起发送（其中 Site 由可注册域定义），这提供了一些针对 cross-site 请求伪造攻击的保护(CSRF).
Set-Cookie: mykey=myvalue; SameSite=Strict