如何在 React Router 4 中实现认证路由？

React Router 4 中的经过身份验证的路由

React Router 4 中的经过身份验证的路由需要与以前版本不同的方法。 React Router 4 不再支持带有组件和子属性的嵌套路由，这使得实现经过身份验证的路由变得更具挑战性。

解决方案：使用重定向组件

来实现经过身份验证路由，您可以使用重定向组件。 Redirect 组件根据给定条件将用户重定向到不同的路径。

考虑以下 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>

如果用户经过身份验证（anthed），此组件将呈现指定的组件===真）；否则，它会将用户重定向到登录页面。

用法：

现在，您可以在路由中使用 PrivateRoute 组件，如下所示：

<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>

在此示例中，仪表板路由的 PrivateRoute 会将未经身份验证的用户重定向到登录页面。

替代解决方案：调度操作

另一种方法，可能不太理想的是在 AuthenticatedRoute 组件的 render 方法中调度一个操作。这可能看起来像：

<code class="javascript">export default class AuthenticatedRoute extends React.Component {
  render() {
    if (!this.props.isLoggedIn) {
      this.props.redirectToLogin()
      return null
    }
    return <Route {...this.props} />
  }
}</code>

当用户未登录时，此方法会触发到登录页面的重定向，但它可能感觉不如使用重定向组件那么优雅。

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