在React-Router中如何進行頁面權限管理

這篇文章主要介紹了React-Router如何進行頁面權限管理的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

前言

在一個複雜的SAP應用程式中，我們可能需要根據使用者的角色控制使用者進行頁面的權限，甚至在使用者進入系統之前就進行權限的控制。本文就此一權限控制進行討論。本文假設讀者了解React和React-Router的相關使用。

從傳統的Router開始

一個傳統的路由大概長下邊這個樣式，這是沒有增加任何權限限制的。

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

這裡一共有3個頁面 IndexPage, PhotoPage,InfoPage。

新增第一個權限

假設我們需要在使用者進入PhotoPage之前需要驗證使用者是否有權限，根據store的一個狀態去判斷。

先加入以下一個函數

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

函數裡我們判斷了state的admin是否等於1，否則跳到首頁。

然後在Route加入onEnter={authRequired} 屬性

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

透過以上，就完成了第一個權限的新增

進入系統之前就進行權限控制

如果需要在進入系統之前就進行權限控制，那就需要改變一下策略。

例如上邊的例子，加入state的admin並未加載，那麼就需要在上一層的route進行資料加載

先加入一個載入資料的函數

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

接著再修改一下Router

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

這樣在進入下邊之前，就會先進行資料載入。

透過以上簡單幾步，一個完整的權限控制鏈就完成了.

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在AngularJS中如何實作猜數字大小功能

在jQuery中圖片檢視外掛程式如何使用

在vue中如何實作分頁元件

使用vue實作簡單鍵盤動作

在React中詳細介紹受控組件與非受控組件

以上是在React-Router中如何進行頁面權限管理的詳細內容。更多資訊請關注PHP中文網其他相關文章！