如果刷新浏览器反应丢失会话答案

【问题标题】：React losing session if refresh browser如果刷新浏览器反应丢失会话
【发布时间】：2021-05-26 18:23:43
【问题描述】：

我将我的用户会话保持在redux 状态。

我有一个登录reducer，下面是initialState

const initialState = {
    logged: false,
    user: null,
}

登录后，我将已登录设置为 true 和用户详细信息。

然后，我有一个 Navigation 文件夹，使用 react-router-dom 来管理我的导航，并使用 PrivateRoute 函数来验证用户是否已登录。

const PrivateRoute = ({ component, ...options }) => {
  const login = useSelector((state) => state.login);
    console.log(login);
  const finalComponent = login.logged ? component : Login;

  return <Route {...options} component={finalComponent} />;
};

const Navigation = () => {
  
  return (
    <Router>
      <Switch>
        <PrivateRoute exact path="/" component={Home} />
        <Route exact path="/login" component={Login} />
        <PrivateRoute exact path="/checkRegister" component={CheckRegister} />
      </Switch>
    </Router>
  )
}

export default Navigation;

如果我打开应用程序登录并开始导航，一切正常。但是，如果我刷新浏览器或在登录后将浏览器从 localhost:3000/ 更改为 localhost:3000/checkRegister 它会终止状态并返回登录页面，因为状态 login.logged 回到初始值 false .

【问题讨论】：

如果您每次刷新商店时都使用 redux，应用程序会将状态重置为其默认值，如果您想保持状态，请查看此库：github.com/rt2zz/redux-persist 如果您不这样做'不想要一个库，您必须构建自定义逻辑，在呈现页面之前触发请求进行身份验证，以便在页面加载之前更新当前用户的状态。
你可以试试 react-redux-session API。它的使用非常简单：npmjs.com/package/redux-react-session
@jean182 谢谢。如果您想将其发布为答案，我会接受。这是您刚刚解释的一个很好的例子：dev.to/bhatvikrant/redux-persist-v6-in-detail-react-10nh
谢谢我添加了答案

标签： reactjs redux react-redux

【解决方案1】：

有两种选择

您可以使用其他用户已经提到的 redux-persist。
登录后将用户对象保存在本地存储中。现在，当您初始化用户状态时，检查您是否在本地存储中保存了一些值，然后获取该值并将其分配，否则将其设置为 null。

【讨论】：

【解决方案2】：

Redux 是一个基于客户端的库，所以如果你执行刷新，就像 react 一样，状态将被设置为初始状态。

您始终可以使用 redux persist 之类的库以多种方式持久化状态，即使标签已刷新：https://github.com/rt2zz/redux-persist

作为我在评论中提到的旁注，如果您想避免使用外部库，实际上可以重新安排您的代码，以便在呈现内容之前产生一些副作用。

【讨论】：