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

就行啦。

嗯，高阶组件让生活又美好了一些~