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>

このコンポーネントは、ユーザーが認証されている場合 (認証されている場合)、指定されたコンポーネントをレンダリングします。 === true);それ以外の場合は、ユーザーをログイン ページにリダイレクトします。

使用法:

これで、次のようにルートで 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>

このアプローチは、ユーザーがログインしていないときにログイン ページへのリダイレクトをトリガーしますが、Redirect コンポーネントを使用するよりも洗練されていないように感じるかもしれません。

以上がReact Router 4 で認証済みルーティングを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。