Comment gérer les autorisations de page dans React-Router

Cet article présente principalement comment React-Router gère les autorisations des pages. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un coup d'œil.

Avant-propos

Dans une application SAP complexe, nous pouvons avoir besoin de contrôler les autorisations de page de l'utilisateur en fonction du rôle de l'utilisateur, ou contrôlez même les autorisations avant que les utilisateurs n'entrent dans le système. Cet article traite de ce contrôle des autorisations. Cet article suppose que les lecteurs comprennent l'utilisation associée de React et React-Router.

Commencez avec un routeur traditionnel

Un itinéraire traditionnel ressemble à celui ci-dessous, qui n'ajoute aucune restriction d'autorisation.

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>
 )
}

Il y a 3 pages ici, IndexPage, PhotoPage et InfoPage.

Ajouter la première autorisation

Supposons que nous devions vérifier si l'utilisateur a l'autorisation avant d'accéder à PhotoPage, en fonction d'un statut du magasin.

Ajoutez d'abord la fonction suivante

const authRequired = (nextState, replace) => {
  // Now you can access the store object here.
  const state = store.getState();  
  if (state.admin != 1) {
   replace('/');
  }
 };

Dans la fonction on détermine si l'admin de l'état est égal à 1, sinon on passe à la page d'accueil.

Ajoutez ensuite l'attribut onEnter={authRequired} à la route

<Route path="photo" component={PhotoPage} onEnter={authRequired} />

Grâce à ce qui précède, la première autorisation est ajoutée

Avant d'entrer dans le système Effectuer l'autorisation contrôler

Si vous devez contrôler les autorisations avant d'entrer dans le système, vous devez alors changer de stratégie.

Par exemple, dans l'exemple ci-dessus, si l'administrateur ajouté à l'état n'est pas chargé, alors les données doivent être chargées dans l'itinéraire de la couche supérieure

Ajoutez d'abord une fonction à charger les données

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());
 }

Puis modifiez le routeur

   
    
    <Route path="photo" component={PhotoPage} onEnter={authRequired} />
    
     
  

pour que les données soient chargées avant d'entrer en bas.

Grâce aux étapes simples ci-dessus, une chaîne complète de contrôle des autorisations est complétée.

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Comment implémenter la fonction de deviner le nombre dans AngularJS

Comment utiliser le plug-in de visualisation d'images dans jQuery

Comment implémenter des composants de pagination dans vue

Utiliser vue pour implémenter des opérations de clavier simples

Détails dans React Présentation des composants contrôlés et des composants non contrôlés

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!