web-dev-qa-db-fra.com

React Autorisation du routeur

Quelles sont les meilleures pratiques pour la vérification des autorisations avant le montage d'un composant?

J'utilise react-router 1.x

Voici mes itinéraires

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

Voici mon composant de tableau de bord:

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>
    );
  }
});
javascriptreactjsauthorizationreact-router
59
theo

Solution mise à jour pour React router v4

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

Réagit le routeur jusqu'à la v

Utilisez l'événement 'onEnter' et dans le rappel, vérifiez si l'utilisateur est autorisé:

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

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

Avec react-router 4, vous avez accès à Route props à l'intérieur du composant. Pour rediriger un utilisateur, il vous suffit d'insérer la nouvelle URL dans l'historique. Dans votre exemple, le code serait:

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>
    );
  }
});

Aux docs, ils montrent autre moyen de le faire , en utilisant la propriété render au lieu de component. Ils définissent un PrivateRoute, qui rend le code très explicite lorsque vous définissez tous vos itinéraires.

5
Daniel Reina

Si vous souhaitez appliquer une autorisation à plusieurs composants, vous pouvez le faire comme ceci.

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

Pour composant unique, vous pouvez faire

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