react高階組件經(jīng)典應(yīng)用之權(quán)限控制詳解
前言
所謂高級(jí)組件，即：接受一個(gè)組件作為參數(shù)，并且其返回值也為一個(gè)react組件
而大家應(yīng)該都知道，權(quán)限控制算是軟件項(xiàng)目中的常用功能了。在網(wǎng)站中，權(quán)限控制一般分為兩個(gè)維度：頁面級(jí)別和頁面元素級(jí)別。
我們來說說頁面元素粒度的權(quán)限控制。在某個(gè)頁面中，有個(gè)“創(chuàng)建用戶”的按鈕，管理員才能看到。
一般想到的做法類似這樣
class Page extends Component{
render() {
let hasCreatePermission = tool.getAuth("createUser");
return (
<div>
{hasCreatePermission ? <Button>創(chuàng)建用戶</Button> : null}
</div>
);
}
}
在當(dāng)前用戶的權(quán)限列表中判斷是否有“創(chuàng)建用戶”的權(quán)限，然后控制按鈕的顯示和隱藏。
有一天，產(chǎn)品經(jīng)理說，“沒有權(quán)限的話，按鈕就置灰”。
于是代碼改成了這樣：
render() {
let hasCreatePermission = tool.getAuth("createUser");
return (
<div>
{hasCreatePermission ? <Button>創(chuàng)建用戶</Button> : <Button disabled={true}>創(chuàng)建用戶</Button>}
</div>
);
}
過了一個(gè)月，產(chǎn)品經(jīng)理又說，“沒有權(quán)限的話，按鈕也正常展示，只是點(diǎn)擊后給個(gè)'申請(qǐng)權(quán)限'的文案提示”。
額，硬著頭皮改了下代碼：
render() {
let hasCreatePermission = tool.getAuth("createUser");
return (
<div>
{hasCreatePermission ? <Button>創(chuàng)建用戶</Button> : <Button onClick={()=>alert("權(quán)限不足，請(qǐng)找管理員小K申請(qǐng)")}>創(chuàng)建用戶</Button>}
</div>
);
}
如果網(wǎng)站中只有幾個(gè)權(quán)限控制的按鈕還好，想象一下，如果有50+這樣的按鈕，內(nèi)心是不是想砍需求方？
需求方是不敢砍的。那么有沒有一種方法，可以統(tǒng)一控制無權(quán)限時(shí)候的表現(xiàn)呢？
有。讓我們來試試React的高階組件吧。
export let wrapAuth = ComposedComponent =>class WrapComponent extends Component {
// 構(gòu)造
constructor(props) {
super(props);
}
static propTypes = {
auth:PropTypes.string.isRequired,
};
render() {
if (tool.getAuth(this.props.auth)) {
return <ComposedComponent { ...this.props} />;
} else {
return null;
}
}
};
這個(gè)方法實(shí)際上是一個(gè)包裝器，接受一個(gè)組件參數(shù)，根據(jù)權(quán)限，返回一個(gè)新的組件。
然后頁面按鈕的權(quán)限控制實(shí)現(xiàn)改成：
const AuthButton = wrapAuth(Button);
class Page extends Component{
render() {
return (
<div>
<AuthButton auth="createUser">創(chuàng)建用戶</AuthButton>
</div>
);
}
}
當(dāng)遇到前面所說的需求變動(dòng)時(shí)，現(xiàn)在只要把包裝器里return null這行代碼改成
return <ComposedComponent disabled={true} { ...this.props} />
或者
return <ComposedComponent onClick={()=>alert("權(quán)限不足，請(qǐng)找管理員小K申請(qǐng)")} { ...this.props} />
就行啦。
嗯，高階組件讓生活又美好了一些~
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了react-native彈窗封裝的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了React Web開發(fā)實(shí)戰(zhàn)示例，實(shí)現(xiàn)卡片拖拽效果，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-11-11
使用react在修改state中的數(shù)組和對(duì)象數(shù)據(jù)的時(shí)候(setState)
這篇文章主要介紹了使用react在修改state中的數(shù)組和對(duì)象數(shù)據(jù)的時(shí)候(setState)，具有很好的參考價(jià)值，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
React18系列reconciler從0實(shí)現(xiàn)過程詳解
這篇文章主要介紹了React18系列reconciler從0實(shí)現(xiàn)過程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
淺談對(duì)于react-thunk中間件的簡(jiǎn)單理解
這篇文章主要介紹了淺談對(duì)于react-thunk中間件的簡(jiǎn)單理解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了React組件性能最佳優(yōu)化實(shí)踐分享，React組件性能優(yōu)化的核心是減少渲染真實(shí)DOM節(jié)點(diǎn)的頻率，減少Virtual?DOM比對(duì)的頻率，更多相關(guān)內(nèi)容需要的朋友可以參考一下2023-03-03
本文介紹了React腳手架（CreateReactApp）的使用指南,包括創(chuàng)建項(xiàng)目、項(xiàng)目結(jié)構(gòu)、常用命令、最佳實(shí)踐、常見問題解決以及腳手架的優(yōu)勢(shì),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-12-12
解決React報(bào)錯(cuò)Property 'X' does not
這篇文章主要為大家介紹了解決React報(bào)錯(cuò)Property 'X' does not exist on type 'HTMLElement'，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
最近,React 服務(wù)器組件受到了廣泛的關(guān)注和熱捧,這是因?yàn)?nbsp;React 服務(wù)器組件允許開發(fā)人員將與組件相關(guān)的任務(wù)外包給服務(wù)器,在本文中,我們將討論什么是 React 服務(wù)器組件,以及如何將它們集成到構(gòu)建應(yīng)用程序中,需要的朋友可以參考下2023-10-10
React Hook 'useEffect' is call
這篇文章主要為大家介紹了React Hook 'useEffect' is called in function報(bào)錯(cuò)解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12