如何在 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 render="{(props)"> authed === true
        ? <component></component>
        : <redirect to="{{pathname:" state: props.location></redirect>}
    />
  )
}</route></code>

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

用法：

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

<code class="javascript"><route path="/" exact component="{Home}"></route>
<route path="/login" component="{Login}"></route>
<route path="/register" component="{Register}"></route>
<privateroute authed="{this.state.authed}" path="/dashboard" component="{Dashboard}"></privateroute></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></route>
  }
}</code>

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

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