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数组去掉重复
May 12 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
May 09 Javascript
JS实现输入框提示文字点击时消失效果
Jul 19 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
JS实现瀑布流布局
Oct 21 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 Javascript
微信小程序实现弹出菜单动画
Jun 21 Javascript
JS深入学习之数组对象排序操作示例
May 01 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 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
历史证明,懒惰才是推动科学发展技术进步的动力
2021/03/02 无线电
php实现的MySQL通用查询程序
2007/03/11 PHP
php ci框架中加载css和js文件失败的原因及解决方法
2014/07/29 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
用 JavaScript 迁移目录
2006/12/18 Javascript
js常见表单应用技巧
2008/01/09 Javascript
js实现select跳转功能代码
2014/10/22 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
2016/10/09 Javascript
将JSON字符串转换成Map对象的方法
2016/11/30 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
vue实现todolist基本功能以及数据存储功能实例详解
2019/04/11 Javascript
详解Vue调用手机相机和相册以及上传
2019/05/05 Javascript
原生JS实现无缝轮播图片
2020/06/24 Javascript
Python异常处理总结
2014/08/15 Python
Python Matplotlib库入门指南
2015/05/18 Python
Python基础教程之内置函数locals()和globals()用法分析
2018/03/16 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
python多继承(钻石继承)问题和解决方法简单示例
2019/10/21 Python
Python Tornado批量上传图片并显示功能
2020/03/26 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
Python爬虫实例——scrapy框架爬取拉勾网招聘信息
2020/07/14 Python
使用placeholder属性设置input文本框的提示信息
2020/02/19 HTML / CSS
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
劳资员岗位职责
2013/11/11 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
项目经理任命书
2014/06/04 职场文书
倡导文明标语
2014/06/16 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python