Question

我对React开发还不熟悉。作为第一个项目，我想为社交俱乐部创建一个集成了CMS-y功能的网站。我正在使用 React ， react-router-dom（v4）和 firebase 。我不得不设置受保护的路由，目前我的路线如下：

<Switch>
      //other Routes with the same structure
      <Route path="/events" component={Events} />
      <Route path="/aboutus" component={AboutUs} />  
      //other Routes with the same structure

      //Users have to be logged in from here on
      <PrivateRoute path="/dashboard" component={Dashboard} />
      <PrivateRoute path="/messages" component={Messages} />
      //other PrivateRoutes with the same structure

      <Route component={Home} />
      </Switch>

react-browser-dom-team 推荐

PrivateRoute ，如下所示：

const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
 localStorage.loggedIn==="true" ? (
  <Component {...props}/>
) : (
  <Redirect to={{
    pathname: '/login',
    state: { from: props.location }
  }}/>
)
)}/>
)

我的问题是我必须在localStorage中保存 loggedIn -flag，以便（单独的） PrivateRoute 能够检查它。我想使用props（从App.js传递给Main.js，我的firebaseOnAuthStateChange所在的位置）。

然后我想出了简单地将受保护的路由写为：

<Route path="/dashboard" component={this.props.logged ? Dashboard : Login} />

这样，在访问 / dashboard 时，没有重定向到 Login 组件，但它会在用户登录之前显示，然后显示所需的组件。< / p>

现在我的问题：我在网上做了很多研究，只发现了“PrivateRoute” - 解决方案......我的方法有问题吗？什么是localStorage的立场？

react-router-dom条件/受保护组件

0 个答案: