react高階組件經(jīng)典應用之權(quán)限控制詳解
前言
所謂高級組件，即：接受一個組件作為參數(shù)，并且其返回值也為一個react組件
而大家應該都知道，權(quán)限控制算是軟件項目中的常用功能了。在網(wǎng)站中，權(quán)限控制一般分為兩個維度：頁面級別和頁面元素級別。
我們來說說頁面元素粒度的權(quán)限控制。在某個頁面中，有個“創(chuàng)建用戶”的按鈕，管理員才能看到。
一般想到的做法類似這樣
class Page extends Component{
render() {
let hasCreatePermission = tool.getAuth("createUser");
return (
<div>
{hasCreatePermission ? <Button>創(chuàng)建用戶</Button> : null}
</div>
);
}
}
在當前用戶的權(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>
);
}
過了一個月，產(chǎn)品經(jīng)理又說，“沒有權(quán)限的話，按鈕也正常展示，只是點擊后給個'申請權(quán)限'的文案提示”。
額，硬著頭皮改了下代碼：
render() {
let hasCreatePermission = tool.getAuth("createUser");
return (
<div>
{hasCreatePermission ? <Button>創(chuàng)建用戶</Button> : <Button onClick={()=>alert("權(quán)限不足，請找管理員小K申請")}>創(chuàng)建用戶</Button>}
</div>
);
}
如果網(wǎng)站中只有幾個權(quán)限控制的按鈕還好，想象一下，如果有50+這樣的按鈕，內(nèi)心是不是想砍需求方？
需求方是不敢砍的。那么有沒有一種方法，可以統(tǒng)一控制無權(quán)限時候的表現(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;
}
}
};
這個方法實際上是一個包裝器，接受一個組件參數(shù)，根據(jù)權(quán)限，返回一個新的組件。
然后頁面按鈕的權(quán)限控制實現(xiàn)改成：
const AuthButton = wrapAuth(Button);
class Page extends Component{
render() {
return (
<div>
<AuthButton auth="createUser">創(chuàng)建用戶</AuthButton>
</div>
);
}
}
當遇到前面所說的需求變動時，現(xiàn)在只要把包裝器里return null這行代碼改成
return <ComposedComponent disabled={true} { ...this.props} />
或者
return <ComposedComponent onClick={()=>alert("權(quán)限不足，請找管理員小K申請")} { ...this.props} />
就行啦。
嗯，高階組件讓生活又美好了一些~
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
這篇文章主要為大家介紹了React-three-fiber的使用初體驗，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章主要給大家分享React中的useEffect四種用法，useEffect中 觸發(fā)更新，重復的 useEffect，依賴值觸發(fā)回調(diào)，useEffect 的返回值，通過代碼示例介紹的非常詳細,需要的朋友可以參考下2023-07-07
關(guān)于useEffect的第二個參數(shù)解讀
這篇文章主要介紹了關(guān)于useEffect的第二個參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
詳解react中useCallback內(nèi)部是如何實現(xiàn)的
前幾天有人在問在useCallback函數(shù)如果第二個參數(shù)為空數(shù)組, 為什么拿不到最新的state值，那么這一章就來分析一下useCallback內(nèi)部是如何實現(xiàn)的，感興趣的小伙伴跟著小編一起來學習吧2023-07-07
這篇文章主要介紹了React?路由使用,使用路由時需要為組件指定一個路由的path，最終會以path為基礎(chǔ)，進行頁面的跳轉(zhuǎn)，具體使用先看個簡單示例，該示例比較簡單就是兩個Tab頁面的來回切換2022-05-05
react的渲染機制是非常獨特的,有別于 Vue 框架的渲染次數(shù)的優(yōu)化計算,React 很久以來就有PureComponent、shouldUpdate,本文小編給大家介紹了React渲染的優(yōu)化方案,需要的朋友可以參考下2024-08-08
useContext是React提供的一個鉤子函數(shù),用于在函數(shù)組件中訪問和使用Context,useContext的實現(xiàn)原理涉及React內(nèi)部的機制,本文給大家介紹react中的useContext具體實現(xiàn),感興趣的朋友一起看看吧2023-11-11
今天我們來學習React是如何構(gòu)建起一個單頁應用的，React作為目前最流行的前端框架之一，其受歡迎程度不容小覷，從這門框架上我們可以學到許多其他前端框架所缺失的東西，也是其創(chuàng)新性所在的地方，比如虛擬DOM、JSX等。下面一起來看看。2016-08-08
React?正確使用useCallback?useMemo的方式
這篇文章主要介紹了React?正確使用useCallback?useMemo的方式，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-08-08
這篇文章主要介紹了詳解操作虛擬dom模擬react視圖渲染，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07