Wie Sie sich richtig ein JWT authentifizierten Leitwegsuch implementieren auf Router V4

Question

Mit Hilfe der RR V4 docs reagieren, dies ist ein Beispiel-Code für PrivateRoute (oder AuthenticatedRoute)

const AuthExample =() => (
    <Router> 
    <div> 
     <AuthButton/> 
     <ul> 
     <li><Link to="/public">Public Page</Link></li> 
     <li><Link to="/protected">Protected Page</Link></li> 
     </ul> 
     <Route path="/public" component={Public}/> 
     <Route path="/login" component={Login}/> 
     <PrivateRoute path="/protected" component={Protected}/> 
    </div> 
    </Router> 

Wo die PrivateRoute wie umgesetzt werden können:

const PrivateRoute = ({ component: Component, ...rest }) => (

    let token - localStorage.getItem('jwtToken'); 

    <Route {...rest} render={props => (
    token ? (
     <Component {...props}/> 
    ) : (
     <Redirect to={{ 
     pathname: '/login', 
     state: { from: props.location } 
     }}/> 
    ) 
)}/> 
) 

Meine Zweifel sind:

a) ist es genug, wenn das Token lokal gespeichert ist, zu überprüfen Anwendung machen die compon zu lassen ent?

b) Was passiert, wenn das Token abgelaufen ist, wie kann ich verhindern, dass die neue Komponente geladen wird?

c) Soll ich den Server am Anfang von PrivateRoute anrufen, um Token Ablauf und Gültigkeit zu überprüfen? Das würde bei jeder Routenänderung einen weiteren Roundtrip zum Server hinzufügen.

d) Was ist der richtige Weg, um das Token zu validieren, ohne den Server zu berühren?

Answer 1

JWT kann standardmäßig Daten speichern, Sie können die Codierung aufheben, um zu überprüfen, ob der Ablauf abgelaufen ist, oder andere zusätzliche Felder, die Ihr Server dort gespeichert hat.

Der wichtige Teil ist, es bei jedem API-Aufruf an den Server zu senden, um die Signatur & die Daten mit ihm zu überprüfen.

Also mein Vorschlag ist für Routen es ist genug, um nur Client-Seite zu validieren, Hacker kann das nur durch Ändern der JWT umgehen, deshalb sollte jeder API-Aufruf von Ihren privaten Routen mit der JWT-Server-Seite validiert werden, Unterschriften prüfen.

Answer 2

Ich benutze nicht reagieren, aber ich habe einige Erfahrung mit JWT Token.

IMHO sollte der Client zu keiner Zeit Zugriff auf das Token haben. Es sollte auf einem Cookie gespeichert und bei jedem Aufruf an den Server gesendet werden, der der einzige sein sollte, der den Schlüssel hat, um es zu dekodieren und auf seinen Inhalt zuzugreifen. Sie können die Routen definieren, die das zu sendende Token benötigen, typischerweise etwas wie '/ api/*'.

Wenn das Token korrekt ist, sendet es die vom Client erwartete Antwort, und wenn nicht, weist es den Client an, zu/login umzuleiten (mit einer 401 oder einer anderen von Ihnen bevorzugten Methode).

Wenn das Token abgelaufen ist (wile Anfrage an den Server), können Sie den Schlüssel automatisch neu generieren oder dem Client sagen, dass er sich abmelden oder dem Client den Server nach einem neuen Schlüssel fragen soll oder was immer Sie für die beste Option halten. Sie können auch ein anderes Token "refresh_token" haben, das nur dazu verwendet wird, das "access_token" neu zu erstellen (was auch eine sehr häufige Lösung ist).

Wenn Sie brauchen, könnte ich mehr ausarbeiten.