Heim > Artikel > Web-Frontend > So verwalten Sie Seitenberechtigungen in React-Router
In diesem Artikel wird hauptsächlich vorgestellt, wie React-Router Seitenberechtigungen verwaltet. Der Herausgeber findet ihn recht gut, daher werde ich ihn jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Editor und werfen wir einen Blick darauf.
Vorwort
In einer komplexen SAP-Anwendung müssen wir möglicherweise die Seitenberechtigungen des Benutzers basierend auf der Rolle des Benutzers steuern, oder Kontrollieren Sie sogar Berechtigungen, bevor Benutzer das System betreten. In diesem Artikel wird diese Berechtigungskontrolle erläutert. In diesem Artikel wird davon ausgegangen, dass die Leser die damit verbundene Verwendung von React und React-Router verstehen.
Beginnen Sie mit einem herkömmlichen Router
Eine herkömmliche Route sieht wie die folgende aus, die keine Berechtigungseinschränkungen hinzufügt.
export default (store) => { const history = syncHistoryWithStore(hashHistory, store); return ( <Router history={history}> <Route path="/" component={AppRoot} > <IndexRoute component={IndexPage} /> <Route path="photo" component={PhotoPage} /> <Route path="info" component={InfoPage} /> </Route> {/* <Redirect path="*" to="/error" /> */} </Router> ) }
Hier gibt es 3 Seiten: IndexPage, PhotoPage und InfoPage.
Fügen Sie die erste Berechtigung hinzu
Angenommen, wir müssen überprüfen, ob der Benutzer die Berechtigung hat, bevor wir PhotoPage betreten, und dies anhand des Status des Geschäfts beurteilen.
Fügen Sie zunächst die folgende Funktion hinzu
const authRequired = (nextState, replace) => { // Now you can access the store object here. const state = store.getState(); if (state.admin != 1) { replace('/'); } };
In der Funktion ermitteln wir, ob der Admin des Staates gleich 1 ist, andernfalls springen wir zur Startseite.
Dann fügen Sie das Attribut onEnter={authRequired} zu Route hinzu
<Route path="photo" component={PhotoPage} onEnter={authRequired} />
Durch die oben genannten Schritte wird die erste Berechtigung hinzugefügt
Berechtigungen werden vor dem Betreten der Systemsteuerung erteilt
Wenn Sie die Berechtigungen vor dem Betreten des Systems kontrollieren müssen, müssen Sie die Strategie ändern.
Wenn beispielsweise im obigen Beispiel der dem Status hinzugefügte Administrator nicht geladen wird, müssen die Daten in die Route der oberen Ebene geladen werden.
Fügen Sie zunächst eine Funktion hinzu Daten laden
function loadData(nextState, replace, callback) { let unsubscribe; function onStateChanged() { const state = store.getState(); if (state.admin) { unsubscribe(); callback(); } } unsubscribe = store.subscribe(onStateChanged); store.dispatch(actions.queryAdmin()); }
Ändern Sie dann den Router
<Route path="photo" component={PhotoPage} onEnter={authRequired} />
so, dass die Daten geladen werden, bevor Sie unten eintreten.
Durch die oben genannten einfachen Schritte wird eine vollständige Berechtigungskontrollkette vervollständigt.
Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.
Verwandte Artikel:
So implementieren Sie die Funktion zum Schätzen von Zahlen in AngularJS
So verwenden Sie das Bildanzeige-Plug-in in jQuery
So implementieren Sie Paging-Komponenten in Vue
Verwenden Sie Vue, um einfache Tastaturoperationen zu implementieren
Details in React Einführung kontrollierter Komponenten und unkontrollierter Komponenten
Das obige ist der detaillierte Inhalt vonSo verwalten Sie Seitenberechtigungen in React-Router. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!