Ich habe versucht, authentifizierte Routen zu implementieren, aber festgestellt, dass React Router 4 dies jetzt verhindert:
<Route exact path="/" component={Index} />
<Route path="/auth" component={UnauthenticatedWrapper}>
<Route path="/auth/login" component={LoginBotBot} />
</Route>
<Route path="/domains" component={AuthenticatedWrapper}>
<Route exact path="/domains" component={DomainsIndex} />
</Route>
Der Fehler ist:
Warnung: Sie sollten nicht
<Route component>
und<Route children>
auf derselben Route verwenden.<Route children>
wird ignoriert
Was ist in diesem Fall der richtige Weg, um dies umzusetzen?
Es erscheint in react-router
(v4) Dokumenten, es schlägt so etwas vor
<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>
Aber ist es möglich, dies zu erreichen, während mehrere Routen zusammengefasst werden?
AKTUALISIEREN
Ok, nach einigen Recherchen habe ich mir Folgendes ausgedacht:
import React, {PropTypes} from "react"
import {Route} from "react-router-dom"
export default class AuthenticatedRoute extends React.Component {
render() {
if (!this.props.isLoggedIn) {
this.props.redirectToLogin()
return null
}
return <Route {...this.props} />
}
}
AuthenticatedRoute.propTypes = {
isLoggedIn: PropTypes.bool.isRequired,
component: PropTypes.element,
redirectToLogin: PropTypes.func.isRequired
}
Ist es richtig, eine Aktion auszulösen, render()
fühlt es sich falsch an. Es scheint nicht wirklich richtig mit componentDidMount
oder einem anderen Haken?
javascript
reactjs
react-router
react-router-v4
Jiew Meng
quelle
quelle
componentWillMount
wird, kann er die gerenderte Ausgabe auch nur für den Bruchteil einer Sekunde sehen?componentWillMount()
SSR nicht aufgerufen wird, sonderncomponentDidMount()
nicht. WiecomponentWillMount()
zuvor genanntrender()
, sieht der Benutzer nichts von einer neuen Komponente. Es ist also der beste Ort, um nachzusehen.<Redirect to="/auth">
aus den Dokumenten verwenden, anstatt die VersandaktionAntworten:
Sie werden die
Redirect
Komponente verwenden wollen. Es gibt verschiedene Ansätze für dieses Problem. Hier ist eine, die mir gefällt: Ich habe eine PrivateRoute-Komponente, die eineauthed
Requisite aufnimmt und dann basierend auf diesen Requisiten rendert.Jetzt kann dein
Route
s so aussehenWenn Sie immer noch verwirrt sind, habe ich diesen Beitrag geschrieben, der möglicherweise hilft - Geschützte Routen und Authentifizierung mit React Router v4
quelle
<Redirect />
. Das Problem ist,<Redirect />
scheint in meinem Fall nicht mit Redux zu funktionieren? Ich muss eine Aktionstate: {from: props.location}}}
verursachte amaximum call stack exceeded
. Ich musste es entfernen. Können Sie erklären, warum diese Option bei Tyler McGinnis nützlich ist?({component: Component, ...rest})
Syntax. Ich hatte die gleiche Frage lol! stackoverflow.com/a/43484565/6502003Tnx Tyler McGinnis für die Lösung. Ich mache meine Idee von Tyler McGinnis Idee.
Sie können das so implementieren
DecisionFunc ist nur eine Funktion, die true oder false zurückgibt
quelle
(Verwenden von Redux für die Statusverwaltung)
Wenn der Benutzer versucht, auf eine URL zuzugreifen, werde ich zuerst prüfen, ob ein Zugriffstoken verfügbar ist. Wenn nicht, wird er zur Anmeldeseite umgeleitet. Sobald sich der Benutzer über die Anmeldeseite anmeldet, speichern wir diese sowohl in localstorage als auch in unserem Redux-Status. (localstorage oder Cookies. Wir halten dieses Thema vorerst aus dem Kontext).
da Redux-Status als aktualisiert und Privaterouten neu gerendert werden. Jetzt haben wir Zugriffstoken, sodass wir zur Startseite weiterleiten können.
Speichern Sie die dekodierten Berechtigungsnutzdaten auch im Redux-Status und übergeben Sie sie an den Reaktionskontext. (Wir müssen keinen Kontext verwenden, aber um auf die Autorisierung in einer unserer verschachtelten untergeordneten Komponenten zuzugreifen, ist der Zugriff über den Kontext einfach, anstatt jede untergeordnete Komponente mit Redux zu verbinden.)
Auf alle Routen, die keine speziellen Rollen benötigen, kann direkt nach der Anmeldung zugegriffen werden. Wenn eine Rolle wie admin benötigt wird (wir haben eine geschützte Route erstellt, die prüft, ob er die gewünschte Rolle hatte, wenn er nicht zu einer nicht autorisierten Komponente umleitet).
Ähnliches gilt für jede Ihrer Komponenten, wenn Sie die Schaltfläche oder etwas basierend auf der Rolle deaktivieren müssen.
einfach können Sie auf diese Weise tun
Was ist, wenn der Benutzer versucht, ein Dummy-Token in localstorage einzufügen? Da wir über ein Zugriffstoken verfügen, werden wir zur Home-Komponente umleiten. Meine Home-Komponente führt einen Restaufruf durch, um Daten abzurufen. Da das JWT-Token ein Dummy war, gibt der Restaufruf einen nicht autorisierten Benutzer zurück. Also rufe ich die Abmeldung auf (wodurch localstorage gelöscht und erneut zur Anmeldeseite umgeleitet wird). Wenn die Homepage statische Daten enthält und keine API-Aufrufe tätigt (dann sollten Sie im Backend einen API-Aufruf zur Token-Überprüfung haben, damit Sie überprüfen können, ob das Token REAL ist, bevor Sie die Homepage laden).
index.js
History.js
Privateroutes.js
checkAuth.js
DEKODIERTE JWT-TOKEN-PROBE
quelle
Signin
? Wenn ein Benutzer weiß, dass er nicht angemeldet ist, sollte er die Möglichkeit haben, direkt auf die Anmeldung zuzugreifen, oder?Installieren Sie React-Router-Dom
Erstellen Sie dann zwei Komponenten, eine für gültige Benutzer und eine für ungültige Benutzer.
Versuchen Sie dies auf app.js.
quelle
Basierend auf der Antwort von @Tyler McGinnis . Ich habe einen anderen Ansatz mit ES6-Syntax und verschachtelten Routen mit umschlossenen Komponenten gewählt:
Und damit:
quelle
Ich weiß, dass es eine Weile her ist, aber ich habe an einem npm-Paket gearbeitet für private und öffentliche Strecken gearbeitet.
So erstellen Sie eine private Route:
Sie können auch öffentliche Routen erstellen, auf die nur nicht autorisierte Benutzer zugreifen können
Ich hoffe, es hilft!
quelle
Ich implementierte mit-
Authentifizierungs-Requisiten werden an Komponenten übergeben, z. B. die Anmeldung, mit der der Benutzerstatus geändert werden kann. Komplette AppRoutes-
Überprüfen Sie das vollständige Projekt hier: https://github.com/varunon9/hello-react
quelle
Es scheint, dass Sie zögern, Ihre eigene Komponente zu erstellen und dann in der Rendermethode zu versenden? Nun, Sie können beides vermeiden, indem Sie nur die
render
Methode der<Route>
Komponente verwenden. Sie müssen keine<AuthenticatedRoute>
Komponente erstellen, es sei denn, Sie möchten dies wirklich. Es kann so einfach wie unten sein. Beachten Sie den{...routeProps}
Spread, um sicherzustellen, dass Sie die Eigenschaften der<Route>
Komponente weiterhin an die untergeordnete Komponente senden (<MyComponent>
in diesem Fall).Siehe die Informationen finden Renderdokumentation zu React Router V4
Wenn Sie eine dedizierte Komponente erstellen wollten, scheinen Sie auf dem richtigen Weg zu sein. Da es sich bei React Router V4 um ein rein deklaratives Routing handelt (wie in der Beschreibung angegeben), werden Sie Ihren Redirect-Code wahrscheinlich nicht außerhalb des normalen Komponentenlebenszyklus platzieren. Wenn Sie sich den Code für React Router selbst ansehen , führen sie die Umleitung entweder in
componentWillMount
odercomponentDidMount
abhängig davon durch, ob es sich um serverseitiges Rendering handelt oder nicht. Hier ist der folgende Code, der ziemlich einfach ist und Ihnen helfen kann, sich wohler zu fühlen, wo Sie Ihre Umleitungslogik platzieren sollen.quelle
Meine vorherige Antwort ist nicht skalierbar. Folgendes halte ich für einen guten Ansatz:
Ihre Routen-
Die Idee ist, einen Wrapper in
component
Requisiten zu verwenden, der die Originalkomponente zurückgibt, wenn keine Authentifizierung erforderlich ist oder bereits authentifiziert wurde. Andernfalls wird die Standardkomponente zurückgegeben, z. B. Login.quelle
Hier ist die einfache, saubere, geschützte Route
isTokenVerified
ist ein Methodenaufruf zum Überprüfen des Autorisierungstokens, der im Grunde genommen boolesch zurückgibt.quelle
Hier ist, wie ich es mit React und Typescript gelöst habe. Ich hoffe es hilft !
quelle
quelle
Ich suchte auch nach einer Antwort. Hier sind alle Antworten recht gut, aber keine gibt Antworten darauf, wie wir sie verwenden können, wenn der Benutzer die Anwendung nach dem Öffnen wieder startet. (Ich wollte sagen, Cookie zusammen zu verwenden).
Sie müssen nicht einmal eine andere privateRoute-Komponente erstellen. Unten ist mein Code
Und hier ist authComponent
Unten habe ich einen Blog geschrieben, dort können Sie auch ausführlichere Erklärungen erhalten.
Erstellen Sie geschützte Routen in ReactJS
quelle
Die Lösung, die letztendlich für meine Organisation am besten funktioniert hat, ist unten aufgeführt. Sie fügt lediglich eine Überprüfung des Renderns für die Sysadmin-Route hinzu und leitet den Benutzer zu einem anderen Hauptpfad der Anwendung weiter, wenn er nicht auf der Seite sein darf.
SysAdminRoute.tsx
Es gibt drei Hauptrouten für unsere Implementierung: die öffentlich zugängliche Site, den angemeldeten Client / die angemeldete App und die Sys-Admin-Tools unter / sysadmin. Sie werden basierend auf Ihrer 'Authentizität' umgeleitet und dies ist die Seite unter / sysadmin.
SysAdminNav.tsx
quelle