前言
所謂高級組件，即：接受一個組件作為參數，并且其返回值也為一個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} />
就行啦。
嗯，高階組件讓生活又美好了一些~
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
