如何在 React Router 4 中有效实现经过身份验证的路由？

在 React Router 4 中实现经过身份验证的路由：探索不同的方法

在 React Router 4 中，由于以下警告，经过身份验证的路由构成了挑战同时使用 和在同一条路线内。本文探讨了有效实现经过身份验证的路由的替代方法。

一种方法涉及创建一个自定义 AuthenticatedRoute 组件，该组件仅在用户登录时才呈现路由。但是，有些人认为在 render 方法中分派操作感觉非常规。

另一种解决方案利用重定向组件将未经授权的用户重定向到登录页面。通过创建仅在用户经过身份验证时才呈现指定组件的 PrivateRoute 组件，您可以简化实现。

以下代码片段演示了 PrivateRoute 方法：

<code class="javascript">function PrivateRoute ({component: Component, authed, ...rest}) {
  return (
    <Route
      {...rest}
      render={(props) => authed === true
        ? <Component {...props} />
        : <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
    />
  )
}</code>

使用此方法，您的路由可以构造如下：

<code class="javascript"><Route path='/' exact component={Home} />
<Route path='/login' component={Login} />
<Route path='/register' component={Register} />
<PrivateRoute authed={this.state.authed} path='/dashboard' component={Dashboard} /></code>

通过了解这些不同的方法，您可以在 React Router 4 中有效地实现经过身份验证的路由，确保应用程序中安全且受控的导航。

以上是如何在 React Router 4 中有效实现经过身份验证的路由？的详细内容。更多信息请关注PHP中文网其他相关文章！