在 redux 中保持身份验证状态的最佳方法是什么答案

【问题标题】：What is the best way to persist authentication state in redux在 redux 中保持身份验证状态的最佳方法是什么
【发布时间】：2021-11-02 13:57:27
【问题描述】：

我正在编写一个使用本地护照作为后端身份验证策略的 mern 应用程序。本质上，当用户在前端登录时，Login 组件获取提交的数据（用户名、密码），然后 axios 向后端发出 post 请求，后端运行此代码。

export const loginUser: RequestHandler = async (req, res, next) => {
  passport.authenticate("local", (err, user, info) => {
    if (err) throw err;
    if (!user) return res.redirect("/login");
    req.login(user, (err) => {
      if (err) throw err;
      const user: IUser = req.user as IUser;
      const userResponse: IUserResponse = {
        id: user.id.toString(),
        username: user.username,
        active: user.active,
        deleted: user.deleted,
        role: user.role,
      };
      return res.status(200).json({ user: userResponse });
    });
  })(req, res, next);
};

此代码已运行。

如您所见，一个带有用户的 json 响应对象被发回。此外，当发生这种情况时，会初始化一个会话，可以在 chrome 的应用程序选项卡下查看该会话。它看起来像：

我知道这是会话 ID。当用户登录时，redux 状态会更新以反映用户已通过身份验证，但是，当用户刷新页面时，状态会被清除并且不再经过身份验证。但是，会话 ID 仍然存在。

保持此身份验证状态的最佳方式是什么？

在有人将此标记为重复之前，我已经彻底研究过的问题：

How to store authentication state in react and express app

提供了一个不错的框架，但没有真正的实现想法。

On React Router, how to stay logged in state even page refresh?

我没有使用 JWT 身份验证，我使用的是本地护照。

How to persist login after refresh in react-redux app using JWT

同样，基于 JWT。我以前用过 JWT。在这种情况下，我正在尝试使用护照。

从今天早上 7 点开始，我还查看了几篇媒体文章和 youtube 视频，试图解决这个问题，到目前为止我收集到的是：

以某种方式使用本地存储
以某种方式使用会话

我真的遇到了障碍，所以非常感谢任何帮助。如果我没有提供信息，请询问。

与往常一样，如果您回答或尝试回答此问题，感谢您抽出宝贵时间。

【问题讨论】：

如果你只使用纯react没有服务端渲染，当你刷新页面时，浏览器接收到的只有每次都相同的html和js文件。会话 ID 实际上是存在的，但是如果您的服务器端代码没有将任何基于会话的信息放入 html 中，这并不重要。因此，您需要一个额外的端点，该端点将从会话中返回有关用户的信息并将其返回给客户端。然后当你的 react 应用启动时，你需要从这个端点获取数据并将其放入 redux。如果用户未登录，此端点可能不返回任何内容或错误。
@AlexChashin 如何从会话中获取信息？
我不熟悉护照，所以你必须查阅它的文档。对于本地护照，我找到了这个示例存储库github.com/passport/express-4.x-local-example/blob/master/…，在这个文件中，您可以看到他们如何访问req.user 属性，该属性可能包含来自会话的信息。然后您可以将此信息作为响应返回。但是我不知道这些信息是如何到达那里的，好像是在调用ensureLogIn()
感谢您的帮助。我将尝试将某种令牌附加到 req.user 对象，看看是否可行
您也可以查看npmjs.com/package/redux-persist

标签： reactjs typescript authentication react-redux passport.js

【解决方案1】：

两个不错的选择：

js-cookie，将用户会话存储在 cookie 中 - 比使用本地存储更安全。
redux-persist，在 Redux 上添加持久性支持，但需要熟悉 redux 状态管理 - 比使用 cookie 和本地存储更安全。

【讨论】：