React-Router如何进行页面权限管理的方法


Posted in Javascript onDecember 06, 2017

前言

在一个复杂的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>

这样在进入下边之前,就会先进行数据加载。

通过以上简单几步,一个完整的权限控制链就完成了.

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 表单验证扩展(三)
Oct 20 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
JS实现线性表的链式表示方法示例【经典数据结构】
Apr 11 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
Jan 23 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
swiper4实现移动端导航切换
Oct 16 Javascript
JavaScript canvas基于数组生成柱状图代码实例
Mar 06 Javascript
移动前端图片压缩上传的实例
Dec 06 #Javascript
详细分析JS函数去抖和节流
Dec 05 #Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
Dec 05 #Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 #Javascript
vue+iview写个弹框的示例代码
Dec 05 #Javascript
Node.js创建Web、TCP服务器
Dec 05 #Javascript
实例讲解javascript实现异步图片上传方法
Dec 05 #Javascript
You might like
网站用php实现paypal整合方法
2010/11/28 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
php中DOMElement操作xml文档实例演示
2013/03/26 PHP
PHP简单获取及判断提交来源的方法
2016/04/22 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
详解PHP处理字符串类似indexof的方法函数
2017/06/11 PHP
Wordpress ThickBox 添加“查看原图”效果代码
2010/12/11 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
jQuery实现行文字链接提示效果的方法
2015/03/10 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
如何解决webpack-dev-server代理常切换问题
2019/01/09 Javascript
详解js创建对象的几种方法及继承
2019/04/12 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
使用axios发送post请求,将JSON数据改为form类型的示例
2019/10/31 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
python logging类库使用例子
2014/11/22 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
python DataFrame 取差集实例
2019/01/30 Python
Python数据库小程序源代码
2019/09/15 Python
abstract class和interface有什么区别?
2012/01/03 面试题
网页设计个人找工作求职信
2013/11/28 职场文书
奉献演讲稿范文
2014/05/21 职场文书
甜品蛋糕店创业计划书
2014/09/21 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
2014年物业管理工作总结
2014/11/21 职场文书
中学教师个人总结
2015/02/10 职场文书
大学生十八大感想
2015/08/11 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书