react高阶组件经典应用之权限控制详解
2017-09-07 09:22
816 查看
前言
所谓高级组件,即:接受一个组件作为参数,并且其返回值也为一个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} />
就行啦。
嗯,高阶组件让生活又美好了一些~
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
相关文章推荐
- Struts2使用Interceptor实现权限控制的应用实例详解
- Yii2 rbac权限控制之Rule实现及应用详解
- React router动态加载组件之适配器模式的应用详解
- Struts2使用Interceptor实现权限控制的应用实例详解
- 网络层访问权限控制技术-ACL详解 (3)
- React-Native中一些常用组件的用法详解(一)
- spring-core组件详解——Environment应用上下文环境
- java异常、访问控制权限(java开发实战经典 知识点1)
- salesforce----------权限控制(详解1)
- React-约束组件及无约束组件详解
- React Native-11.React Native TabBarIOS TabBarIOS.Item组件详解
- react爬坑之通过条件渲染控制组件的渲染与否
- php_ThinkPHP的RBAC(基于角色权限控制)详解
- 如何在应用系统中实现数据权限的控制功能(2)
- 【React Native开发】React Native控件之Touchable*系列组件详解(18)
- 使用ember-simple-auth实现Ember.js应用的权限控制
- 如何在自己的信息管理系统里集成第三方权限控制组件 - 开发一个好用稳定的开放组件
- React Native学习-控制横竖屏第三方组件:react-native-orientation
- ThinkPHP的RBAC(基于角色权限控制)详解
- 实现数据行的权限控制(Policy的应用)