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