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 相关文章推荐
Js 获取Gridview选中行的内容操作步骤
Feb 05 Javascript
JS文本框默认值处理详解
Jul 10 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
node.js中的fs.lchmodSync方法使用说明
Dec 16 Javascript
AngularJS基础学习笔记之控制器
May 10 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
基于原生JS实现图片裁剪
Aug 01 Javascript
微信小程序商品详情页规格属性选择示例代码
Oct 30 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
layui 弹出层值回传解决方式
Nov 14 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 Javascript
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
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学习笔记 数组的常用函数
2011/06/13 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
CodeIgniter CLI模式简介
2014/06/17 PHP
浅谈使用 PHP 进行手机 APP 开发(API 接口开发)
2014/08/11 PHP
jQuery ajax+PHP实现的级联下拉列表框功能示例
2019/02/12 PHP
js中return false(阻止)的用法
2013/08/14 Javascript
JS 获取滚动条高度示例代码
2013/10/24 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
jQuery手动点击实现图片轮播特效
2020/04/20 Javascript
JS创建对象几种不同方法详解
2016/03/01 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
Python兔子毒药问题实例分析
2015/03/05 Python
python中input()与raw_input()的区别分析
2016/02/27 Python
Python编程求质数实例代码
2018/01/31 Python
python利用pandas将excel文件转换为txt文件的方法
2018/10/23 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
Python多个装饰器的调用顺序实例解析
2020/05/22 Python
屈臣氏俄罗斯在线商店:Watsons俄罗斯
2020/08/03 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
优秀员工自荐信范文
2013/10/05 职场文书
模具数控专业自荐信
2014/01/27 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
国家领导干部党的群众路线教育实践活动批评与自我批评材料
2014/09/23 职场文书
校园新闻广播稿5篇
2014/10/10 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
大专护理专业自荐信
2015/03/25 职场文书
财务统计员岗位职责
2015/04/14 职场文书
学会感恩主题班会
2015/08/12 职场文书
Python开发工具Pycharm的安装以及使用步骤总结
2021/06/24 Python