提问者:小点点

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


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在我刷新后仍然在浏览器中。


共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的存储}