如何在 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中文網其他相關文章！