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实现flash8类似的连接效果
May 03 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
Mar 01 Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 Javascript
js读写json文件实例代码
Oct 21 Javascript
js获取数组的最后一个元素
Apr 14 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
web打印小结
Jan 11 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
vue+iview 兼容IE11浏览器的实现方法
Jan 07 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
JavaScript仿京东轮播图效果
Feb 25 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 header()函数使用说明
2008/07/10 PHP
php使用ICQ网关发送手机短信
2013/10/30 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
tp5(thinkPHP5)操作mongoDB数据库的方法
2018/01/20 PHP
JQuery 实现的页面滚动时浮动窗口控件
2009/07/10 Javascript
Array.prototype.slice 使用扩展
2010/06/09 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
详解javascript实现自定义事件
2016/01/19 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
2016/06/16 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
AngularJS实现select的ng-options功能示例
2017/07/12 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
2017/07/31 Javascript
vue裁切预览组件功能的实现步骤
2018/05/04 Javascript
完美解决linux下node.js全局模块找不到的情况
2018/05/16 Javascript
Angular5中提取公共组件之radio list的实例代码
2018/07/10 Javascript
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
Python中用于去除空格的三个函数的使用小结
2015/04/07 Python
Linux中Python 环境软件包安装步骤
2016/03/31 Python
python实现Flappy Bird源码
2018/12/24 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
详解Python利用configparser对配置文件进行读写操作
2020/11/03 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
大专生自荐信
2013/10/04 职场文书
语文教育专业推荐信范文
2013/11/25 职场文书
酒店副总岗位职责
2013/12/24 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
运动会通讯稿150字
2014/02/15 职场文书
《桂花雨》教学反思
2014/04/12 职场文书
外语专业毕业生自荐信
2014/04/14 职场文书
小学毕业演讲稿
2014/04/25 职场文书
欠款证明
2015/06/24 职场文书
ECharts transform数据转换和dataZoom在项目中使用
2022/12/24 Javascript