React Router und Authentifizierung

Question

Ich bin neu zu reagieren und zu lernen, wie zu reagieren-Router Routing zu erreichen. Als Teil meiner Beispiel-App habe ich versucht, einen Authentifikator auf jedem Pfad zu platzieren, der Teil der Website ist. Ich verfolge dieses Beispiel: https://github.com/reactjs/react-router/blob/master/examples/auth-flow/app.js

Und hier ist mein Beispielcode:

render(
    <Router history={browserHistory}> 
    <Route path="/" component={App} onEnter={requireAuth}> 
     <IndexRoute component={Home}/> 
     <Route path="login" component={Login}/> 
     <Route path="logout" component={Logout}/> 
     <Route path="about" component={About}/> 
     <Route path="inbox" component={Inbox}/> 
    </Route> 
    </Router>, 
    document.getElementById("app")); 

Und hier ist das, was requireAuth tut:

function requireAuth(nextState, replace) { 
    if(!auth.isUserLoggedIn()) { 
    replace({ 
     path: "/login", 
     state: {nextPathname: nextState.location.pathname} 
    }); 
    } 
} 

Der Unterschied zwischen dem, was ich tue und was Das Beispiel ist, dass das Beispiel die Auth-Funktionalität nur auf eine Route (Dashboard) legt, wo ich sie auf jede Route setzen möchte. Aber das Beispiel hört auf zu arbeiten und beginnt mit der Fehlermeldung "Maximale Call-Stack-Größe überschritten" und ich denke zu Recht, weil/login eine Unterroute von/ist und weil requireAuth auf die Unterroute umleitet, versucht es einfach erneut zu authentifizieren und versucht es weiter je. Ich vermisse hier wahrscheinlich eine einfache Lösung, um das zu erreichen, aber ich bin nicht in der Lage herauszufinden, was der beste Weg ist. Was kann ich tun, um die Authentifizierung auf jeder Ebene der Site zu aktivieren?

Answer 1

Sie können Ihre Route ändern, so dass die Seiten, die nicht über Login erfordern kann, ohne dass der Authentifizierung gemacht werden, wie:

render(
    <Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <IndexRoute component={Home}/> 
     <Route path="login" component={Login}/> 
     <Route path="logout" component={Logout}/> 
     <Route path="about" component={About}/> 
     <Route path="inbox" component={Inbox} onEnter={requireAuth}/> 
    </Route> 
    </Router>, 
    document.getElementById("app")); 

Wenn Benutzer bereits requireAuth eingeloggt hat nichts tun, und Ihre Posteingangskomponente wird gerendert.

Answer 2

Antwort von @DemoUser ist fast korrekt und @KumarM wie können Sie sich anmelden, wenn Sie authentifiziert werden müssen, um Login-Seite zu sehen? hier ist, was Sie tun können

render(
    <Router history={browserHistory}> 
    <Route path="/" component={App}> 
     <Route path="login" component={Login}/> 
     <Route path="logout" component={Logout}/> 
     <Route path="/dashboard" onEnter={requireAuth} > 
     <IndexRoute component={Home}/> 
     <Route path="about" component={About}/> 
     <Route path="inbox" component={Inbox} /> 
    </Route> 
    </Route> 
    </Router>, 
    document.getElementById("app")); 

was passiert hier?

1. Login- und Logout-Seite muss nicht
2. alle untergeordneten Komponenten des Armaturenbrettes authentifiziert werden automatisch

Answer 3

authentifiziert werden ich glaube, Sie es must've jetzt herausgefunden, aber ich über diese heute gestolpert , also dachte ich daran, dies zu teilen:

Wenn Sie auf der Sicherung jeder Ressource Ihrer Anwendung sind, würde ich vorschlagen, zweimal zu denken. Was @ abhirathore2006 sagte ist: Benutzer Ihrer Anwendung sollten nicht authentifiziert werden, um auf die Login-Komponente zuzugreifen. Sollten Sie?

Sie haben richtigerweise angenommen, dass die maximale Call-Stack-Größe erhöht ist, weil unendliche Weiterleitungen stattfinden, und Sie können versuchen, dies zu vermeiden, indem Sie einen Null-Check oder etwas durchführen.

Der Punkt ist, Sie müssten nur den onEnter-Haken auf dem/logout// inbox &/über Komponenten platzieren und lassen Sie das/Login wie es ist. Andernfalls könnten Sie versuchen, diese Komponenten in einem HOC zu verpacken oder den neueren react-Router4-Ansatz zu verwenden, um das zu erhalten, was Sie brauchen.

Hoffe, das hilft!

Prost!