Mobx实例应用

背景：

这个问题要从一个后台管理系统的权限管理开始说起，我们将后台权限管理系统可以分为几个层级，如下：

• 账号登录，一般对于后台是只有登录账号后，才能跳转到主页面进行一系列的操作的，所有请求都要求在header中带上accessToken，才能正常的获取到数据或者请求接口成功，没有登录就什么权限都没有；
• 角色管理，后台管理系统超级管理员可以设置几种角色给每种角色设置不同的权限，角色不同权限不同；
• 功能权限，根据角色的设定配置对应的菜单权限和按钮权限，菜单权限是无权限的根本不显示菜单目录，且即使可以通过其他方式打开不在权限范围内的页面，后端也会对权限进行校验。对应的按钮权限是最细小的权限划分了，比如有的页面可以部分管理员查看，但只有一部分有权限的管理员才能去编辑。

方案：

要实现按钮权限时带来了问题，前端可以通过调用后端接口获取到该用户的全部权限，但权限按钮散落在各个页面的各级组件中，如果想要控制权限按钮的展示与否，需要使用状态管理器统一管理。引入mobx 和mobx-react 依赖包。

Mobx的api包含三种，分别为observable定义可观察数据，action修改可观察数据，autorun等对可观察数据的变化作出反应，与react结合时，使用mobx-react中的observer将组件的render方法包装为autorun。

更多请查看：https://cn.mobx.js.org/

应用：

1、在store中定义个可观察数据存储权限数据：

@observable data={
        menuPublishPermission:false,//菜单发布权限
        matterPublishPermission:false,//事项发布权限
        pushPermission:false,//推送权限
       ...
    };

2、定义个action用于改变store中的数据：

/*action*/
    @action.bound saveData(data){
        let this_=this;
        data.forEach(function (el, index) {
            if (el.code === 404) {//发布推送相关
                let arr=el.children;
                arr.forEach(function (e,i) {
                    switch (e.code) {
                        case 70001:this_.data.menuPublishPermission=e.ifme;break;
                        case 70002:this_.data.matterPublishPermission=e.ifme;break;
                        case 70003:this_.data.policyPublishPermission=e.ifme;break;
                        case 70004:this_.data.specialPublishPermission=e.ifme;break;
                        case 90001:this_.data.pushPermission=e.ifme;break;
                    }
                })
            }
            ...
        });
    }

3、引入observer来包装react组件，使在可观察数据data变化时更新组件，也就是自动执行render函数，用法如下：

@observer
class FormManage extends React.Component {
...
}

使用store中的data数据，当有权限时展示按钮并绑定事件功能，如没有权限就展示一个无法点击的按钮，如下：

render(){
  return <div>
      {permissionStore.data.formPermission?
         <Button onClick={this.toAddMatter.bind(this)}>新增表格</Button>
          :
         <Button disabled>新增表格</Button>
        }
   </div>
 }