reactjs - 反应路由器、重定向、firebase auth 和私有路由：管理它的最佳方式

Question

我正在使用 reactjs 开发前端管理员，并且我想仅在经过身份验证后才授予对所有页面（包括页面的导航和通用模板）的访问权限。如果用户未通过身份验证，我只想显示登录表单，仅此而已。我已经这样做了：

render() {

if (this.state.isAuthenticated === false) {
  return (
    <div className="App">
      <BrowserRouter>
        <div>
          <Switch>
            <Route path="/" component={Login} />
          </Switch>
        </div>
      </BrowserRouter>
    </div>
  );
}

return (
  <div className="App">
    <BrowserRouter>
      <div>
        <Navigator isAuthenticated={this.state.isAuthenticated} />
        <Switch>
          <Route path="/login" component={Login} />
          <PrivateRoute isAuthenticated={this.state.isAuthenticated} path="/" exact component={Home} />
          <PrivateRoute isAuthenticated={this.state.isAuthenticated} path="/contact" exact component={Contact} />
          <PrivateRoute isAuthenticated={this.state.isAuthenticated} path="/shop" exact component={Shop} />
          <Route render={() => <h1>Page not found</h1>} />
        </Switch>
      </div>
    </BrowserRouter>
  </div>
);
 }
 }

这是一种好方法还是坏方法？我怎样才能以更好的方式做到这一点？

谢谢

标签： reactjsreact-routerfirebase-authentication