How to manage page permissions in React-Router

This article mainly introduces how React-Router manages page permissions. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor and take a look.

Preface

In a complex SAP application, we may need to control the user’s page permissions based on the user’s role, or even Control permissions before users enter the system. This article discusses this permission control. This article assumes that readers understand the related use of React and React-Router.

Start with a traditional Router

A traditional route looks like the one below, which does not add any permission restrictions.

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

There are three pages here: IndexPage, PhotoPage, and InfoPage.

Add the first permission

Suppose we need to verify whether the user has permission before the user enters PhotoPage, and judge based on a status of the store.

First add the following function

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

In the function we determine whether the admin of state is equal to 1, otherwise jump to the homepage.

Then add the onEnter={authRequired} attribute to Route

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

Through the above, the addition of the first permission is completed

Permission before entering the system Control

If you need to control permissions before entering the system, you need to change the strategy.

For example, in the above example, if the admin added to the state is not loaded, then the data needs to be loaded in the route of the upper layer.

First add a function to load data

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

Then modify the Router

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

so that the data will be loaded before entering the bottom.

Through the above simple steps, a complete permission control chain is completed.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement the guessing number size function in AngularJS

How to use the image viewing plug-in in jQuery

How to implement paging components in vue

Use vue to implement simple keyboard operations

Details in React Introducing controlled components and uncontrolled components

The above is the detailed content of How to manage page permissions in React-Router. For more information, please follow other related articles on the PHP Chinese website!