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 框架使用教程 AJAX篇
Oct 11 Javascript
jQuery 瀑布流 浮动布局(一)(延迟AJAX加载图片)
May 23 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
js字符串完全替换函数分享
Dec 03 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
Web Uploader文件上传插件使用详解
May 10 Javascript
js实现3D图片展示效果
Mar 09 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
前端Electron新手入门教程详解
Jun 21 Javascript
Vuex模块化应用实践示例
Feb 03 Javascript
Element图表初始大小及窗口自适应实现
Jul 10 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 和 HTML
2006/10/09 PHP
用PHP连mysql和oracle数据库性能比较
2006/10/09 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
PHP unset函数原理及使用方法解析
2020/08/14 PHP
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
js判断手机端(Android手机还是iPhone手机)
2015/07/22 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
js表单提交和submit提交的区别实例分析
2015/12/10 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
微信小程序学习笔记之登录API与获取用户信息操作图文详解
2019/03/29 Javascript
vue19 组建 Vue.extend component、组件模版、动态组件 的实例代码
2019/04/04 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
Javascript confirm多种使用方法解析
2020/09/25 Javascript
[34:44]Liquid vs TNC Supermajor 胜者组 BO3 第二场 6.4
2018/06/05 DOTA
通过Python爬虫代理IP快速增加博客阅读量
2016/12/14 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
python字符串常用方法
2018/06/14 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
使用Python生成200个激活码的实现方法
2019/11/22 Python
用python实现名片管理系统
2020/06/18 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
写演讲稿所需要注意的4个条件
2014/01/09 职场文书
办公室秘书自我鉴定
2014/01/18 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
python解决12306登录验证码的实现
2021/04/18 Python
OpenCV实现常见的四种图像几何变换
2022/04/01 Python
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android