React-Router如何进行页面权限管理的方法
更新时间：2017年12月06日 08:34:22 作者：seajean
本篇文章主要介绍了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
<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实现图片动态高度长列表的问题
一般我们在写react项目中,同时渲染很多dom节点,会造成页面卡顿, 空白的情况。为了解决这个问题，今天小编给大家分享一篇教程关于react-virtualized实现图片动态高度长列表的问题，感兴趣的朋友跟随小编一起看看吧2021-05-05
这篇文章主要介绍了jenkins分环境部署vue/react项目的方法，本文分步骤给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-02-02
采用React编写小程序的Remax框架的编译流程解析(推荐)
这篇文章主要介绍了采用React编写小程序的Remax框架的编译流程解析(推荐),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
这篇文章主要介绍了十分钟带你快速了解React16新特性,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
这篇文章主要介绍了react native 获取地理位置的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
这篇文章主要为大家介绍了React 状态管理工具优劣势示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家详细介绍了react如何自定义实现状态管理,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下2024-01-01
React 18的推出标志着React并发特性的正式到来,其中useTransition钩子函数是一个重要的新增功能,下面我们就来学习一下useTransition钩子函数的具体使用吧2024-02-02
本文主要介绍了React18之状态批处理的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
ahooks封装cookie localStorage sessionStorage方法
这篇文章主要为大家介绍了ahooks封装cookie localStorage sessionStorage的方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
最新评论