时间戳

首页 > 解决方案 > 如何在 React JS 和 Firebase 中处理用户登录状态？

javascript - 如何在 React JS 和 Firebase 中处理用户登录状态？

问题描述

我正在使用 React JS 和 Firebase 开发一个网络应用程序。我希望以下行为在我的应用程序中起作用。

在登录页面上，有一个复选框“让我保持登录状态”。如果用户未标记该复选框，则在关闭选项卡/浏览器时应自动注销用户。如果用户标记了复选框“让我登录”，除非用户单击仪表板中的“退出”按钮，否则用户将不会退出。此外，如果用户已登录，则应将用户重定向到仪表板页面。如果用户未登录，则应将用户重定向到登录页面。

而且，用户不应该能够通过手动输入 URL 来访问页面。

这是我当前 index.js 文件的一部分。

const browserHistory = createBrowserHistory();

firebase.auth().onAuthStateChanged(user => {
  user ? browserHistory.push("/dashboard") : browserHistory.push("/signin");
});

ReactDOM.render(
  <Router history={browserHistory}>
    <Switch>
      <Theme>
        <Route exact path="/signin" component={SignIn} />
        <Route path="/dashboard" component={Dashboard} />
        <Redirect to="/" />
      </Theme>
    </Switch>
  </Router>,
  document.getElementById('root')
);

在这里，我的问题是，用户可以在重定向后返回。我认为这不是正确的方法。

所以，请帮助我完成这种行为。非常感谢用代码示例回答。

标签： javascriptreactjsfirebasefirebase-authenticationstay-logged-in

解决方案

history.replace是Redirect组件的功能等价物。

replace(path, [state])- (function) 替换历史堆栈上的当前条目

firebase.auth().onAuthStateChanged(user => {
  browserHistory.replace(user ? "/dashboard" : "/signin");
});

成功登录后您可能还想做的是再次重定向到仪表板。

推荐阅读