리액트 라우터 허가

리액트 라우터 허가

구성 요소를 장착하기 전에 승인 확인을 위한 모범 사례는 무엇입니까?

리액트 라우터 1.x를 사용합니다.

여기 제 루트가 있습니다.

React.render((
  <Router history={History.createHistory()}>
    <Route path="/" component={Dashboard}></Route>
    <Route path="/login" component={LoginForm}></Route>
  </Router>
), document.body);

Dashboard 구성 요소는 다음과 같습니다.

var Dashboard = React.createClass({
  componentWillMount: function () {
    // I want to check authorization here
    // If the user is not authorized they should be redirected to the login page.
    // What is the right way to perform this check?
  },

  render: function () {
    return (
      <h1>Welcome</h1>
    );
  }
});

React 라우터 v4용 솔루션 업데이트

<Route 
  path="/some-path" 
  render={() => !isAuthenticated ?
    <Login/> :
    <Redirect to="/some-path" />
}/>

최대 v3의 리액트 라우터

사용자에게 권한이 있는 경우 'onEnter' 이벤트 및 콜백 체크에서 다음을 사용합니다.

<Route path="/" component={App} onEnter={someAuthCheck}>  

const someAuthCheck = (nextState, transition) => { ... }

리액트 라우터 4를 사용하면 컴포넌트 내부의 루트 소품에 접근할 수 있습니다.사용자를 리디렉션하려면 새 URL을 기록으로 푸시하기만 하면 됩니다.이 예에서 코드는 다음과 같습니다.

var Dashboard = React.createClass({
  componentWillMount: function () {
    const history = this.props.history; // you'll have this available
    // You have your user information, probably from the state
    // We let the user in only if the role is 'admin'
    if (user.role !== 'admin') {
      history.push('/'); // redirects the user to '/'
    }
  },

  render: function () {
    return (
      <h1>Welcome</h1>
    );
  }
});

문서에서는 다른 방법을 보여 줍니다.render속성 대신component이 명령어는PrivateRoute모든 루트를 정의하면 코드가 매우 명확해집니다.

여러 구성 요소에 권한을 적용하려면 다음과 같이 할 수 있습니다.

<Route onEnter={requireAuth} component={Header}>
    <Route path='dashboard' component={Dashboard} />
    <Route path='events' component={Events} />
</Route>

단일 컴포넌트에 대해 다음 작업을 수행할 수 있습니다.

<Route onEnter={requireAuth} component={Header}/>

function requireAuth(nextState, replaceState) {
  if (token || or your any condition to pass login test)
  replaceState({ nextPathname: nextState.location.pathname }, 
  '/login')
}

언급URL : https://stackoverflow.com/questions/32898264/react-router-authorization