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
      {...rest}
      render={(props) => authed === true
        ? <Component {...props} />
        : <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
    />
  )
}</code>

이 구성 요소는 사용자가 인증된 경우 지정된 구성 요소를 렌더링합니다(Anthed === 사실); 그렇지 않으면 사용자를 로그인 페이지로 리디렉션합니다.

사용법:

이제 다음과 같이 경로에서 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 구성 요소의 렌더링 메서드에서 작업을 전달하는 것입니다. 이는 다음과 같습니다.

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

이 접근 방식은 사용자가 로그인하지 않은 경우 로그인 페이지로의 리디렉션을 트리거하지만 리디렉션 구성 요소를 사용하는 것보다 덜 우아하게 느껴질 수 있습니다.

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