如何处理在 React JS 中登录 state 和 Firebase 的用户？

Question

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

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

并且，用户不应通过手动键入 URL go 访问这些页面。

这是我当前 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')
);

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

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

Answer 1

history.replace在功能上等同于Redirect组件。

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

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

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