Wie füge ich Redirect zum reaktiven Router dynamisch hinzu?

Question

Ich habe eine Anmeldekomponente, die für nicht authentifizierte Benutzer verfügbar sein sollte. Und direkt nach der Authentifizierung sollte diese Komponente nicht mehr verfügbar sein.

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

Dieser Code funktioniert perfekt, wenn Benutzer Webapp aus irgendeinem Grunde nach der Authentifizierung neu geladen haben, aber natürlich ist es nicht, wenn der Benutzer neu zu laden nicht die Webapp. Ich habe versucht, this.context.router.transitionTo Recht auf die SignUp-Komponente zu verwenden, aber es funktioniert schrecklich - die Komponente wird gerendert, dann wird dieses Skript ausgeführt.

Also ich möchte die Umleitung direkt in die Routen-Variable hinzufügen, um den Router umleiten zu lassen, ohne auch nur versuchen, die Komponente zu rendern.

Answer 1

Statt Ihre Auth-Fluss zu kontrollieren und bedingt bestimmte Routen zu machen, würde ich einen anderen Ansatz empfehlen:

Wenn Sie verwenden reagieren-Router 0.13.x, würde ich die willTransitionTo methods auf Ihrer Komponenten empfehlen, wenn Sie muss die Authentifizierung überprüfen. Es wird aufgerufen, wenn ein Handler gerendert wird, wodurch Sie die Möglichkeit haben, den Übergang abzubrechen oder umzuleiten (in diesem Fall prüfen Sie, ob der Benutzer authentifiziert ist, falls nicht, leiten Sie ihn an einen anderen Pfad weiter). Siehe auth-flow Beispiel hier: https://github.com/ReactTraining/react-router/blob/v0.13.6/examples/auth-flow/app.js

Für Versionen> 0.13.x wäre es onEnter und Enterhooks. Sehen Sie das Beispiel für den Auth-Flow hier: https://github.com/rackt/react-router/blob/master/examples/auth-flow/app.js

Grundsätzlich verschieben Sie den Auth-Check-Fluss weg von Ihrer Variable und in Übergangsereignisse/Hooks. Bevor der Routen-Handler tatsächlich gerendert wird, überprüfen Sie die Authentifizierung und leiten Sie den Benutzer zu einer anderen Route um.