React Router 4에서 인증을 관리하는 방법은 무엇입니까?

React Router 4에서 인증 관리

React Router 버전 4에서 인증된 경로를 구현하려면 이전 버전과 다른 접근 방식이 필요합니다.

원래 접근 방식

이전에는 하위 항목에 대해 여러 Route 구성 요소를 사용할 수 있었지만 이제는 권장되지 않습니다.

<Route exact path="/&quot; component={Index} />
<Route path="/auth" component={UnauthenticatedWrapper}>
    <Route path="/auth/login" component={LoginBotBot} />
</Route>
<Route path="/domains" component={AuthenticatedWrapper}>
    <Route exact path="/domains" component={DomainsIndex} />
</Route>

올바름 구현

인증된 경로를 구현하기 위한 한 가지 옵션은 경로를 확장하고 구성 요소를 렌더링하기 전에 인증을 확인하는 사용자 정의 구성 요소를 사용하는 것입니다.

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
}

대체 접근 방식

또 다른 접근 방식은 인증된 속성을 기반으로 사용자를 리디렉션할 수 있는 리디렉션 구성 요소를 사용하는 것입니다.

function PrivateRoute ({component: Component, authed, ...rest}) {
  return (
    <Route
      {...rest}
      render={(props) => authed === true
        ? <Component {...props} />
        : <Redirect to={{pathname: '/login', state: {from: props.location}}} />}
    />
  )
}

그런 다음 경로에서 PrivateRoute 구성 요소를 사용할 수 있습니다.

<Route path='/' exact component={Home} />
<Route path='/login' component={Login} />
<Route path='/register' component={Register} />
<PrivateRoute authed={this.state.authed} path='/dashboard' component={Dashboard} />

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