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

Question

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操作，它调用服务器forlogin请求，它也运行良好，它将用户信息传递到redux状态，我将进一步使用该状态。

问题是，当我刷新网页时，redux状态变为空，并且redux状态的用户中存储的值变为null，而我希望它仍然存在，这样用户就不应该再次登录&在刷新后再次登录。而且我的cookie在我刷新后仍然在浏览器中。

Answer 1

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

>

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

让initialState={isAppLoaded：false,userAuthenticated：false}

在app.js文件的componentDidMount上，查找isAppLoaded标志值，并从localstorage更新userAuthenticated标志。

componentdidmount=()=>{if（！this.props.isAppLoaded）{let token=localstorage.get('token')；}//分派操作更新userAuthenticated和isAppLoaded的存储}