刷新使用户在 react、redux、nodejs 和基于 cookie 的身份验证中注销答案

【问题标题】：Refreshing makes the user logged out in react, redux, nodejs and cookie based auth刷新使用户在 react、redux、nodejs 和基于 cookie 的身份验证中注销
【发布时间】：2020-07-05 05:54:22
【问题描述】：

router.post("/api/users/login", async (req, res) => {
  try {
    const user = await User.findbyCreds(req.body.email, req.body.password);
    const token = await user.createToken();
    res.cookie("token", token, {
      // maxAge: 60 * 60 * 1000,
      httpOnly: true,
      // secure: true,
      // sameSite: true,
    });
    res.send({ user, token });
  } catch (e) {
    res.status(400).send(e);
  }
});

这是我在服务器端 (nodejs) 的登录路径，通过制作 cookie 并将其传递给浏览器以进行所有进一步的请求，它可以正常工作。

export const loginUser = (formValues) => async (dispatch) => {
  const user = await axios.post("/api/users/login", formValues);
  dispatch({
    type: "LOGIN_USER",
    payload: user.data,
  });
  history.push("/");
};

这是我的 redux 操作，它调用服务器进行登录请求，它也可以正常工作，它将用户信息传递给我进一步使用的 redux 状态。

问题是当我刷新我的网页时，redux 状态为空，并且存储在 redux 状态的用户中的值变为空，而我希望它能够抵抗，以便用户在刷新后不应再次登录。此外，刷新后我的 cookie 仍然存在于浏览器中。

【问题讨论】：

在加载组件之前，您不能检查cookie是否仍然有效，而不是要求用户再次登录，而是将他导航到请求的路线？
刷新时，redux数据会被清除。有几个 npm 包可用于持久化 redux 数据。即，将应用程序的一些状态保存到 localStorage 并在刷新后恢复。所以你可以尝试任何一个包或尝试自己持久化 redux 数据，这将解决这个问题

标签： javascript node.js reactjs cookies redux

【解决方案1】：

有一些外部库，例如 redux-persist、async-storage，它们负责在启动期间对存储进行再水化以处理页面刷新。但是在内部他们都使用浏览器的localStorage来存储和检索密钥。

在 reducer 上创建一个初始状态，将 userAuthenticated 标志设置为 false，并将 isAppLoaded 标志设置为 false。

let initialState ={ isAppLoaded :false, userAuthenticated :false}
在 App.js 文件的 componentDidMount 上，查找 isAppLoaded 标志值，并从 localStorage 更新 userAuthenticated 标志。

componentDidMount=()=>{ if(!this.props.isAppLoaded) { let token =localStorage.get('token');} //dispatch an action to update store for userAuthenticated and isAppLoaded }

【讨论】：