在 React 中使用登录和注销的用户渲染组件

Posted 2023-03-10

【中文标题】在 React 中使用登录和注销的用户渲染组件

【英文标题】：Render components with logged in and logged out user in React

【发布时间】：2021-03-10 12:12:43

【问题描述】：

我是 React 的新手，但不知何故，我设法开发了一个 MERN（Mongoose、Express、React、Node）应用程序。后端将数据存储到 Mongo 数据库中。它使用用户数据向前端发送和接收 API。我正在从后端接收已经注册的用户数据并将其存储到全局挂钩中，以便所有组件都可以共享它。

我想要实现的是能够根据用户是否登录来渲染组件。我需要 JWT 之类的本地存储或 cookie，但不知道如何开始。即使刷新应用程序，用户信息也应该保留。有人可以建议我如何实现这一目标吗？

另外，我正在使用 react-router-dom ^6。我已经意识到以前的版本有一些不同。

提前致谢！

【问题讨论】：

您现在如何处理应用中的登录？如果用户已对本地存储进行身份验证，然后在应用程序加载时使用它，那么存储将是有意义的。像这样***.com/questions/31084779/…

【参考方案1】：

这个问题的正确答案不止一个。通常，您会将 JWT 令牌发送到前端并将其存储在本地存储中。比您检查本地存储并授予用户访问您定义的身份验证路由的权限。

如果你想更进一步。您可以发送两个令牌，一个是普通的 JWT 令牌，一个是具有到期时间（通常为 15 分钟）的 JWT 刷新令牌。该刷新令牌附加到每个请求并在后端更新。前端一直在检查令牌在 useEffect 函数中是否仍然有效。这两个令牌都存储在您的本地存储中，而主令牌用于保持用户登录。如果刷新令牌过期，主令牌和刷新令牌将被删除并且用户退出。

如果您想更进一步，您可以使用 redis 将 JWT 令牌存储在后端，并根据 userId 检查后端的每个请求是否仍然有效。

但是，您也可以使用 cookie。 我建议使用刷新令牌方法，因为它似乎是最常见的方法。