ant design pro从后端动态获得权限展示内容

前一篇文章我写了怎么控制菜单权限和内容权限，但是那些都是写死的，不够灵活，在工作中的需求有很多是满足不了的，今天我再讲讲我说怎么从后端获取权限来展示我们每个用户不同的内容。

1、首先我们后台数据我用了端json数据来模拟，存放在public文件夹下面。
数据的内容如下：

{   
	 "admin":   
	  {        
	  	"User"：{"one":true,"two":false,"three":true,"box_a":true,"box_b":false,"box_c":true,"admin_one":true,"admin_two":true,"admin_three":true,"list":"<Button class='ant-btn ant-btn-primary'>获取菜单1</Button><span>获取内容2</span><h1>获取菜单3</h1><Button class='ant-btn ant-btn-primary'>获取内容4</Button>"},       
	 	"User_a":{"boxa1":true,"boxa2":true,"fetr":true}   
	  },    
	 "user" :    
	 {       
	  	"User":{"one":false,"two":true,"three":true,"box_a":true,"box_b":true,"box_c":true,"list":""},        
	 	"User_u":{"test1":true,"test2":true,"test3":true,"from":true},        
	  	"Lets":{"list1":true,"list2":false,"list3":true}    
	  }
}

** 解释一下这些数据：首先是一个对象中有admin和user两个用户，在admin用户下有User和User_a两个页面，在user用户下有User、User_u和Lets三个页面。
在admin用户下的User页面中组件one可显示，组件two不显示，组件three显示，组件box_a显示，组件box_b不显示，组件box_c显示，跳转页面的组件admin_one显示，组件admin_two显示，组件admin_three显示,list是存储的菜单的string直接渲染到页面。其他页面也是如此 。

我们再来看看代码

constructor(props) {    
	super(props);    
	this.state = {      
	str: [],      
	list: ""    
	}    
	this.isPoss = this.isPoss.bind(this)    
	this.goOrder = this.goOrder.bind(this)  
} 
componentWillMount() {    
 	this.isPoss()  
 }
 isPoss() {
      const _this = this
      let arr = getAuthority()
      const us = getAuthority()
      axios.get('http://localhost:8000/data.json').then((res) => {
          let arrs = res.data[us].User
          let lists = res.data[us].User.list
          for (var i in arrs) {
               if (arrs[i]) {
               arr.push(i)
               }
       }
       _this.setState({
      str: arr,
      list: lists      
      })
    }).catch((err) => {
          console.log(err.status);
   })
  return _this.state.rees  
}
//页面跳转+传递参数  
goOrder() {
        this.props.dispatch(routerRedux.push({ 
             pathname: '/system/user/user_a/user_admin',
              params: this.state.str
          }))  
}

这里'http://localhost:8000/data.json'就是将json文件放入public文件夹下然后请求的地址，这时候你如果是打开项目的，直接访问这个地址就能访问到json文件。

这里我采用了在组件中访问，并且把方法绑定到了componentWillMount()中，并且我是在组件中的render()方法中才创建的权限组件Authorized

这时候你才不用考虑请求的同步和异步，否则你在组件外请求数据你就得用同步请求，然而我们知道同步请求可不是一个好的方法。

至于组件的书写我这里就不写了，大致是配合我之前写的权限的使用。我们来看一下效果。

admin用户的

user用户的