React：存储 JWT

Posted 2023-02-22

【中文标题】React：存储 JWT

【英文标题】：React: Store JWT

【发布时间】：2021-06-18 21:25:35

【问题描述】：

我有一个后端，如果用户成功登录，他会在其中获得 JSON Web 令牌。其他 API 调用需要此令牌，我想将其存储在应用程序范围内，以便从应用程序中的每个点访问它。存储它并从任何地方访问它的最佳点是什么？

【问题讨论】：

我已经添加了答案。

【参考方案1】：

我强烈建议不要存储在localStorage。我强烈推荐 cookie。

See this link。 另外，还有See another link。

【参考方案2】：

您可以在登录时将其存储在本地存储中

export async function login(username, password) 
  const  data: jwt  = await http.post(apiEndpoint,  username, password );
  localStorage.setItem("token", jwt.token);

而且你每次都可以访问它

export function getCurrentUser() 
try 
    const jwt = localStorage.getItem("token");
    return jwtDecode(jwt);
   catch (error) 
    return null;
  

我已经广泛使用了这种方法，并且很有魅力。

【参考方案3】：

将 JWT 令牌存储在浏览器的本地存储或会话存储中并不可取，因为任何对浏览器开发人员选项了解甚少的人（尤其是像我们这样的开发人员）都可以轻松访问它。

我建议您使用仅 http 的 cookie 来存储它们，这样每当您发送 HTTP 请求时都可以访问它。

您可以阅读更多信息 - https://blog.logrocket.com/jwt-authentication-best-practices/