web-dev-qa-db-fra.com

Comment ajouter dynamiquement une redirection vers react-router?

J'ai un composant de connexion, qui devrait être disponible pour les utilisateurs non authentifiés. Et juste après l'authentification, ce composant devrait devenir indisponible.

   var routes = (
      <Route handler={App}>
        <Route name="signIn" handler={signIn}/>
        {/* redirect, if user is already authenticated */}
        { localStorage.userToken ? (
            <Redirect from="signIn" to="/user"/>
          ) : null
        }
      </Route>
    );

Router.run(routes, (Handler, state) => {
  React.render(<Handler {...state}/>, document.getElementById('main'));
});

Ce code fonctionne parfaitement si l'utilisateur a rechargé la webapp pour une raison quelconque après l'authentification, mais bien sûr, il ne fonctionne pas si l'utilisateur n'a pas rechargé la webapp. J'ai essayé d'utiliser this.context.router.transitionTo droit au composant SignUp, mais cela fonctionne très mal - le composant est rendu, puis ce script est exécuté.

Je veux donc ajouter la redirection directement dans la variable routes pour faire rediriger le routeur sans même essayer de rendre le composant.

reactjsfluxreact-router
13
stkvtflw

Au lieu de vérifier votre flux d'authentification et de rendre conditionnellement des itinéraires particuliers, je recommanderais une autre approche:

Si vous utilisez react-router 0.13.x, je recommanderais d'utiliser les méthodes willTransitionTo sur vos composants lorsque vous devez vérifier l'authentification. Il est appelé lorsqu'un gestionnaire est sur le point de se rendre, ce qui vous donne la possibilité d'interrompre ou de rediriger la transition (dans ce cas, vérifiez si l'utilisateur est authentifié, redirigez-le vers un autre chemin sinon). Voir l'exemple d'auth-flow ici: https://github.com/ReactTraining/react-router/blob/v0.13.6/examples/auth-flow/app.js

Pour les versions> 0.13.x, ce serait onEnter et Enterhooks . Voir l'exemple d'auth-flow ici: https://github.com/rackt/react-router/blob/master/examples/auth-flow/app.js

Fondamentalement, vous éloignez le flux de vérification d'authentification de votre variable routes et dans des événements/hooks de transition. Avant que le gestionnaire d'itinéraire ne soit réellement rendu, vérifiez l'authentification et redirigez l'utilisateur vers un autre itinéraire.

23
trekforever