React Router 4에서 인증된 라우팅을 구현하는 방법은 무엇입니까?

React Router 4의 인증된 라우팅

React Router 4의 인증된 경로에는 이전 버전과 다른 접근 방식이 필요합니다. React Router 4는 더 이상 구성 요소 및 하위 속성이 포함된 중첩 경로를 지원하지 않으므로 인증된 경로를 구현하기가 더 어렵습니다.

해결책: 리디렉션 구성 요소 사용

인증된 경로를 구현하려면 경로의 경우 Redirect 구성 요소를 사용할 수 있습니다. 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 구성 요소의 렌더링 메서드에서 작업을 전달하는 것입니다. 이는 다음과 같습니다.

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!