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的气泡提示效果
May 31 Javascript
js中匿名函数的N种写法
Sep 08 Javascript
Jquery之美中不足小结
Feb 16 Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
angularjs指令之绑定策略(@、=、&amp;)
Apr 13 Javascript
在iFrame子页面里实现模态框的方法
Aug 17 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
js验证密码强度解析
Mar 18 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
初学者入门:细述PHP4的核心Zend
2006/09/05 PHP
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
实现laravel 插入操作日志到数据库的方法
2019/10/11 PHP
Javascript注入技巧
2007/06/22 Javascript
javascript加号&quot;+&quot;的二义性说明
2013/03/04 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
jQuery页面加载初始化的3种方法(推荐)
2016/06/02 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
jQuery简单倒计时效果完整示例
2016/09/20 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
2017/05/11 Javascript
用原生JS实现简单的多选框功能
2017/06/12 Javascript
VUE2.0+Element-UI+Echarts封装的组件实例
2018/03/02 Javascript
微信小程序实现手指触摸画板
2018/07/09 Javascript
Node.js EventEmmitter事件监听器用法实例分析
2019/01/07 Javascript
js实现淘宝浏览商品放大镜功能
2020/10/28 Javascript
简单介绍Python中的struct模块
2015/04/28 Python
python递归全排列实现方法
2018/08/18 Python
详解Python3中setuptools、Pip安装教程
2019/06/18 Python
Python 中@property的用法详解
2020/01/15 Python
Python itertools.product方法代码实例
2020/03/27 Python
详解用Python爬虫获取百度企业信用中企业基本信息
2020/07/02 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
adidas官方旗舰店:德国运动用品制造商
2017/11/25 全球购物
美国性感内衣店:Yandy
2018/06/12 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
如何在.net Winform里面显示PDF文档
2012/09/11 面试题
冰淇淋店的创业计划书
2014/02/07 职场文书
护士节演讲稿开场白
2014/08/25 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
哈姆雷特读书笔记
2015/06/29 职场文书
小学体育组工作总结2015
2015/07/21 职场文书
Python制作一个随机抽奖小工具的实现
2021/07/07 Python