React Router 4 で認証を実装するにはどうすればよいですか?

React Router 4 でのルートの認証

React Router 4 では、認証されたルートを実装するには、以前のバージョンとは異なるアプローチが必要です。 を使用してネストされたルートを使用する従来の方法<ルートの子>はサポートされなくなりました。

この問題に対処するには、カスタムの を使用できます。コンポーネント:

<code class="javascript">import React, {PropTypes} from "react";
import { Route } from "react-router-dom";

export default class AuthenticatedRoute extends React.Component {
  render() {
    if (!this.props.isLoggedIn) {
      this.props.redirectToLogin();
      return null;
    }

    return <Route {...this.props} />;
  }
}

AuthenticatedRoute.propTypes = {
  isLoggedIn: PropTypes.bool.isRequired,
  component: PropTypes.element,
  redirectToLogin: PropTypes.func.isRequired,
};</code>

このコンポーネントは、ユーザーがログインしているかどうかを確認し、ログインしていない場合はログイン ページにリダイレクトします。ユーザーがログインしている場合は、通常どおりルートが表示されます。

もう 1 つのアプローチは、 を利用することです。成分。これにより、認証ステータスなどの特定の条件に基づいてユーザーを条件付きでリダイレクトできます。

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

This コンポーネントを使用すると、認証されたプロパティに基づいて特定のルートを保護できます。ユーザーが認証されると、ルートにアクセスできます。それ以外の場合は、ログイン ページにリダイレクトされます。

これらの認証手法を実装することで、React Router 4 のルートを効果的に保護し、承認されたユーザーのみがアプリケーションの特定の部分にアクセスできるようにすることができます。

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