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!