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中的onerror事件概述及使用
Apr 01 Javascript
node.js实现逐行读取文件内容的代码
Jun 27 Javascript
JS实现动态移动层及拖动浮层关闭的方法
Apr 30 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
Html5 js实现手风琴效果
Apr 17 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
详解React 16 中的异常处理
Jul 28 Javascript
vue-router2.0 组件之间传参及获取动态参数的方法
Nov 10 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
Apr 28 Javascript
微信小程序实现图片选择并预览功能
Jul 25 Javascript
JS中async/await实现异步调用的方法
Aug 28 Javascript
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 UTF8编码内的繁简转换类
2009/07/20 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
php引用和拷贝的区别知识点总结
2019/09/23 PHP
用javascript实现画板的代码
2007/09/05 Javascript
js中获取事件对象的方法小结
2011/03/13 Javascript
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
文本域光标操作的jQuery扩展分享
2014/03/10 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
2014/12/29 Javascript
javascript闭包的理解
2015/04/01 Javascript
Javascript中replace()小结
2015/09/30 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
基于vue2.0的活动倒计时组件countdown(附源码下载)
2018/10/09 Javascript
[02:09:59]火猫TV国士无双dota2 6.82版本详解(下)
2014/09/29 DOTA
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
学习python (2)
2006/10/31 Python
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
Python实现针对中文排序的方法
2017/05/09 Python
详解爬虫被封的问题
2019/04/23 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
万年牢教学反思
2014/02/15 职场文书
代理协议书
2014/04/22 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
升学宴答谢词
2015/01/05 职场文书
死亡赔偿协议书
2015/01/28 职场文书
自主招生英文自荐信
2015/03/25 职场文书
客服专员岗位职责范本
2015/04/07 职场文书
超市店长竞聘书
2015/09/15 职场文书
HTML+CSS实现导航条下拉菜单的示例代码
2021/08/02 HTML / CSS
python APScheduler执行定时任务介绍
2022/04/19 Python
nginx访问报403错误的几种情况详解
2022/07/23 Servers