React-Router如何進行頁面權限管理的方法
更新時間：2017年12月06日 08:34:22 作者：seajean
本篇文章主要介紹了React-Router如何進行頁面權限管理的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
前言
在一個復雜的SAP應用中，我們可能需要根據用戶的角色控制用戶進行頁面的權限，甚至在用戶進入系統(tǒng)之前就進行權限的控制。本文就此一權限控制進行討論。本文假設讀者了解React和React-Router的相關使用。
從傳統(tǒng)的Router開始
一個傳統(tǒng)的路由大概長下邊這個樣式，這是沒有添加任何權限限制的。
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的的一個狀態(tài)去判斷。
先添加如下一個函數
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} />
通過以上，就完成了第一個權限的添加
進入系統(tǒng)之前就進行權限控制
如果需要在進入系統(tǒng)之前就進行權限控制，那么就需要改變一下策略。
比如上邊的例子，加入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
<Router history={history}>
<Route path="/" component={AppRoot} onEnter={loadData}>
<IndexRoute component={IndexPage} />
<Route path="photo" component={PhotoPage} onEnter={authRequired} />
<Route path="info" component={InfoPage} />
</Route>
</Router>
這樣在進入下邊之前，就會先進行數據加載。
通過以上簡單幾步，一個完整的權限控制鏈就完成了.
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
使用react-virtualized實現圖片動態(tài)高度長列表的問題
一般我們在寫react項目中,同時渲染很多dom節(jié)點,會造成頁面卡頓, 空白的情況。為了解決這個問題，今天小編給大家分享一篇教程關于react-virtualized實現圖片動態(tài)高度長列表的問題，感興趣的朋友跟隨小編一起看看吧2021-05-05
jenkins分環(huán)境部署vue/react項目的方法步驟
這篇文章主要介紹了jenkins分環(huán)境部署vue/react項目的方法，本文分步驟給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-02-02
采用React編寫小程序的Remax框架的編譯流程解析(推薦)
這篇文章主要介紹了采用React編寫小程序的Remax框架的編譯流程解析(推薦),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了十分鐘帶你快速了解React16新特性,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了react native 獲取地理位置的方法示例，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家介紹了React?狀態(tài)管理工具優(yōu)劣勢示例分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要為大家詳細介紹了react如何自定義實現狀態(tài)管理,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下2024-01-01
React?18的推出標志著React并發(fā)特性的正式到來,其中useTransition鉤子函數是一個重要的新增功能,下面我們就來學習一下useTransition鉤子函數的具體使用吧2024-02-02
本文主要介紹了React18之狀態(tài)批處理的使用，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
ahooks封裝cookie?localStorage?sessionStorage方法
這篇文章主要為大家介紹了ahooks封裝cookie?localStorage?sessionStorage的方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07