react高阶组件经典应用之权限控制详解
更新时间：2017年09月07日 09:22:33 作者：marginyu
在React中,高阶组件是重用组件逻辑的一项高级技术。下面这篇文章主要给大家介绍了关于react高阶组件经典应用之权限控制的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
前言
所谓高级组件，即：接受一个组件作为参数，并且其返回值也为一个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} />
就行啦。
嗯，高阶组件让生活又美好了一些~
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
这篇文章主要为大家详细介绍了react-native弹窗封装的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了React Web开发实战示例，实现卡片拖拽效果，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2022-11-11
使用react在修改state中的数组和对象数据的时候(setState)
这篇文章主要介绍了使用react在修改state中的数组和对象数据的时候(setState)，具有很好的参考价值，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
这篇文章主要介绍了React18系列reconciler从0实现过程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了浅谈对于react-thunk中间件的简单理解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
这篇文章主要介绍了React组件性能最佳优化实践分享，React组件性能优化的核心是减少渲染真实DOM节点的频率，减少Virtual DOM比对的频率，更多相关内容需要的朋友可以参考一下2023-03-03
本文介绍了React脚手架（CreateReactApp）的使用指南,包括创建项目、项目结构、常用命令、最佳实践、常见问题解决以及脚手架的优势,结合实例代码给大家介绍的非常详细,感兴趣的朋友一起看看吧2024-12-12
解决React报错Property 'X' does not
这篇文章主要为大家介绍了解决React报错Property 'X' does not exist on type 'HTMLElement'，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
最近,React 服务器组件受到了广泛的关注和热捧,这是因为 React 服务器组件允许开发人员将与组件相关的任务外包给服务器,在本文中,我们将讨论什么是 React 服务器组件,以及如何将它们集成到构建应用程序中,需要的朋友可以参考下2023-10-10
React Hook 'useEffect' is call
这篇文章主要为大家介绍了React Hook 'useEffect' is called in function报错解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
最新评论