Реагируйте На Авторизацию Маршрутизатора

каковы рекомендации по проверке авторизации перед установкой компонента?

Я использую react-router 1.x

вот мои маршруты

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

вот мой компонент приборной панели:

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>
    );
  }
});
3 57
javascript reactjs react-router authorization

3 ответа:

обновленное решение для реагировать маршрутизатор v4 

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

реагировать маршрутизатор до v3

используйте событие "onEnter" и в обратном вызове проверьте, авторизован ли пользователь: 

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

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

С react-router 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, что делает код очень явным, когда вы определяете все свои маршруты.

5

Если вы хотите применить авторизацию на нескольких компонентах, то вы можете сделать это следующим образом.

<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')
}
0