DDR爱好者之家

react高阶组件经典应用之权限控制详解
站长资源 2024/11/27 佚名
48 1538
DDR爱好者之家 Design By 杰米

前言

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

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

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

一般想到的做法类似这样

class Page extends Component{
 render() {
 let hasCreatePermission = tool.getAuth("createUser"); 
 return (
  <div>
  {hasCreatePermission "htmlcode">



 render() {
 let hasCreatePermission = tool.getAuth("createUser"); 
 return (
  <div>
  {hasCreatePermission "htmlcode">



 render() {
 let hasCreatePermission = tool.getAuth("createUser"); 
 return (
  <div>
  {hasCreatePermission "权限不足，请找管理员小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} />





就行啦。


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


总结


以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米