權限控制算是軟件項目中的經常使用功能了。在網站中,權限控制通常分爲兩個維度:頁面級別和頁面元素級別。html
咱們來講說頁面元素粒度的權限控制。在某個頁面中,有個「建立用戶」的按鈕,管理員才能看到。react
通常想到的作法相似這樣git
class Page extends Component{ render() { let hasCreatePermission = tool.getAuth("createUser"); return ( <div> {hasCreatePermission ? <Button>建立用戶</Button> : null} </div> ); } }
在當前用戶的權限列表中判斷是否有「建立用戶」的權限,而後控制按鈕的顯示和隱藏。github
有一天,產品經理說,「沒有權限的話,按鈕就置灰」。因而代碼改爲了這樣:網站
render() { let hasCreatePermission = tool.getAuth("createUser"); return ( <div> {hasCreatePermission ? <Button>建立用戶</Button> : <Button disabled={true}>建立用戶</Button>} </div> ); }
過了一個月,產品經理又說,「沒有權限的話,按鈕也正常展現,只是點擊後給個'申請權限'的文案提示」。額,硬着頭皮改了下代碼:ui
render() { let hasCreatePermission = tool.getAuth("createUser"); return ( <div> {hasCreatePermission ? <Button>建立用戶</Button> : <Button onClick={()=>alert("權限不足,請找管理員小K申請")}>建立用戶</Button>} </div> ); }
若是網站中只有幾個權限控制的按鈕還好,想象一下,若是有50+這樣的按鈕,心裏是否是想砍需求方?this
需求方是不敢砍的。那麼有沒有一種方法,能夠統一控制無權限時候的表現呢?有。讓咱們來試試React的高階組件吧。code
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; } } };
這個方法其實是一個包裝器,接受一個組件參數,根據權限,返回一個新的組件。而後頁面按鈕的權限控制實現改爲:component
const AuthButton = wrapAuth(Button); class Page extends Component{ render() { return ( <div> <AuthButton auth="createUser">建立用戶</AuthButton> </div> ); } }
當遇到前面所說的需求變更時,如今只要把包裝器裏return null
這行代碼改爲htm
return <ComposedComponent disabled={true} { ...this.props} />
或者
return <ComposedComponent onClick={()=>alert("權限不足,請找管理員小K申請")} { ...this.props} />
就行啦。
嗯,高階組件讓生活又美好了一些~