許可權控制算是軟體專案中的常用功能了。在網站中，許可權控制一般分為兩個維度：頁面級別和頁面元素級別。

我們來說說頁面元素粒度的許可權控制。在某個頁面中，有個“建立使用者”的按鈕，管理員才能看到。

一般想到的做法類似這樣

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} />

就行啦。

嗯，高階元件讓生活又美好了一些~