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>

이 구성 요소는 사용자가 로그인되어 있는지 확인하고 그렇지 않은 경우 로그인 페이지로 리디렉션합니다. 사용자가 로그인한 경우 평소대로 경로를 렌더링합니다.

또 다른 접근 방식은 요소. 이를 통해 인증 상태와 같은 주어진 조건에 따라 조건부로 사용자를 리디렉션할 수 있습니다.

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

이 구성 요소를 사용하면 인증된 소품을 기반으로 특정 경로를 보호할 수 있습니다. 사용자가 인증되면 경로에 액세스할 수 있습니다. 그렇지 않으면 로그인 페이지로 리디렉션됩니다.

이러한 인증 기술을 구현하면 React Router 4의 경로를 효과적으로 보호하고 승인된 사용자만 애플리케이션의 특정 부분에 액세스할 수 있도록 보장할 수 있습니다.

위 내용은 React Router 4에서 인증을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!