react高阶组件经典应用之权限控制详解


Posted in Javascript onSeptember 07, 2017

前言

所谓高级组件,即:接受一个组件作为参数,并且其返回值也为一个react组件

而大家应该都知道,权限控制算是软件项目中的常用功能了。在网站中,权限控制一般分为两个维度:页面级别和页面元素级别。

我们来说说页面元素粒度的权限控制。在某个页面中,有个“创建用户”的按钮,管理员才能看到。

一般想到的做法类似这样

class Page extends Component{
 render() {
 let hasCreatePermission = tool.getAuth("createUser"); 
 return (
  <div>
  {hasCreatePermission ? <Button>创建用户</Button> : null}
  </div>
 );
 }
}

在当前用户的权限列表中判断是否有“创建用户”的权限,然后控制按钮的显示和隐藏。

有一天,产品经理说,“没有权限的话,按钮就置灰”。

于是代码改成了这样:

render() {
 let hasCreatePermission = tool.getAuth("createUser"); 
 return (
  <div>
  {hasCreatePermission ? <Button>创建用户</Button> : <Button disabled={true}>创建用户</Button>}
  </div>
 );
 }

过了一个月,产品经理又说,“没有权限的话,按钮也正常展示,只是点击后给个'申请权限'的文案提示”。

额,硬着头皮改了下代码:

render() {
 let hasCreatePermission = tool.getAuth("createUser"); 
 return (
  <div>
  {hasCreatePermission ? <Button>创建用户</Button> : <Button onClick={()=>alert("权限不足,请找管理员小K申请")}>创建用户</Button>}
  </div>
 );
 }

如果网站中只有几个权限控制的按钮还好,想象一下,如果有50+这样的按钮,内心是不是想砍需求方?

需求方是不敢砍的。那么有没有一种方法,可以统一控制无权限时候的表现呢?

有。让我们来试试React的高阶组件吧。

export let wrapAuth = ComposedComponent =>class WrapComponent extends Component {
 // 构造
 constructor(props) {
  super(props);
 }

 static propTypes = {
  auth:PropTypes.string.isRequired,
 };

 render() {
  if (tool.getAuth(this.props.auth)) {
  return <ComposedComponent { ...this.props} />;
  } else {
  return null;
  }
 }
};

这个方法实际上是一个包装器,接受一个组件参数,根据权限,返回一个新的组件。

然后页面按钮的权限控制实现改成:

const AuthButton = wrapAuth(Button);
class Page extends Component{
 render() {
 return (
  <div>
  <AuthButton auth="createUser">创建用户</AuthButton>
  </div>
 );
 }
}

当遇到前面所说的需求变动时,现在只要把包装器里return null这行代码改成

return <ComposedComponent disabled={true} { ...this.props} />

或者

return <ComposedComponent onClick={()=>alert("权限不足,请找管理员小K申请")} { ...this.props} />

就行啦。

嗯,高阶组件让生活又美好了一些~

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
用javascript实现的激活输入框后隐藏初始内容
Jun 29 Javascript
JavaScript入门教程(10) 认识其他对象
Jan 31 Javascript
js+html+css实现鼠标移动div实例
Jan 30 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
自制微信公众号一键排版工具
Sep 22 Javascript
详解Javascript百度地图接口开发文档中的类和方法
Feb 07 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
JavaScript继承与聚合实例详解
Jan 22 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
简单了解vue 插值表达式Mustache
Jul 22 Javascript
vue使用element-ui实现表单验证
Dec 13 Vue.js
jquery实现广告上下滚动效果
Mar 04 jQuery
React + webpack 环境配置的方法步骤
Sep 07 #Javascript
微信小程序之页面拦截器的示例代码
Sep 07 #Javascript
基于js粘贴事件paste简单解析以及遇到的坑
Sep 07 #Javascript
微信小程序实现轮播图效果
Sep 07 #Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 #Javascript
JavaScript+CSS相册特效实例代码
Sep 07 #Javascript
AngularJS 打开新的标签页实现代码
Sep 07 #Javascript
You might like
解析PHP提交后跳转
2013/06/23 PHP
PHP中比较时间大小实例
2014/08/21 PHP
浅谈PDO的rowCount函数
2015/06/18 PHP
PHP使用strstr()函数获取指定字符串后所有字符的方法
2016/01/07 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
JavaScript解析URL参数示例代码
2013/08/12 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
深入分析JQuery和JavaScript的异同
2014/10/23 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
javascript实现自动输出文本(打字特效)
2015/08/27 Javascript
高效Web开发的10个jQuery代码片段
2016/07/22 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
2016/08/17 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
bootstrap confirmation按钮提示组件使用详解
2017/08/22 Javascript
layui select 禁止点击的实现方法
2019/09/05 Javascript
[37:37]DAC2018 4.4 淘汰赛 Optic vs Mineski 第二场
2018/04/05 DOTA
Python3.0与2.X版本的区别实例分析
2014/08/25 Python
详解python时间模块中的datetime模块
2016/01/13 Python
Python基础语法(Python基础知识点)
2016/02/28 Python
python多任务及返回值的处理方法
2019/01/22 Python
使用django的ORM框架按月统计近一年内的数据方法
2019/07/18 Python
在django中实现choices字段获取对应字段值
2020/07/12 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
大学生四个方面的自我评价
2013/09/19 职场文书
董事长秘书职责
2014/01/31 职场文书
法学毕业生自我鉴定
2014/01/31 职场文书
施工材料员岗位职责
2014/02/12 职场文书
售前工程师职业生涯规划
2014/03/02 职场文书
2015年党员岗位承诺书
2015/04/27 职场文书
离婚纠纷代理词
2015/05/23 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript