這篇文章主要介紹了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} />
這樣在進入下邊之前，就會先進行資料載入。
透過以上簡單幾步，一個完整的權限控制鏈就完成了.
上面是我整理給大家的，希望今後會對大家有幫助。
相關文章：
以上是在React-Router中如何進行頁面權限管理的詳細內容。更多資訊請關注PHP中文網其他相關文章！
