react高階組件之經典應用:權限控制

權限控制算是軟件項目中的經常使用功能了。在網站中,權限控制通常分爲兩個維度:頁面級別和頁面元素級別。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} />

就行啦。

嗯,高階組件讓生活又美好了一些~

相關文章
相關標籤/搜索