Separate front and rear ends of the front-end rights management authority information acquisition menu and (c)

First, access the menu with the right information

Back-end interface to obtain information through the API:

http://127.0.0.1:8000/rbac/roles/rights # privilege interfaces 
http://127.0.0.1:8000/rbac/roles/rmenus # Menu Interface

 1, obtaining menu information

(1) When the menu information is acquired after logging into the home page, the transmission request ajax created in the assembly method of home.

    Created () {
     // call the method of obtaining the menu 
      the this .getMenus (); 
    }, 

    Methods: { 
      getMenus () { 
        // dynamically retrieves the left menu 
        the this $ store.dispatch ( 'Homes / getMenu', the this {_:. the this }) 

      } 
}

(2) In home.js file:

actions: {
    async getMenu(context, object) {
      const res = await object._this.$http.get("crm/menus");
      const {data, meta: {message, code}} = res.data;
      if (code === 2000) {
        context.commit("GETMENU", data.menus_list);
        object._this.$message.error(message)
      }
    }
}

  mutations: {

    GETMENU(state, data) {
      state.menus_list = data
  }
}

state: {
    menus_list: [],
  }

  getters: {
    getMenu: state => {
      return state.menus_list
    }
}

(3) in the form of menu data acquired:

{ 
    {
         'Title': 'User Manager' ,
         'icon': 'EL-icon-LOCATION' ,
         'ID':. 1 ,
         'Children': [{ 'title': 'User List', 'url': '/ CRM / User ',' ID ':. 1 }, 
                     { ' title ':' list of departments ',' URL ':' / CRM / Dept ',' ID ':. 11 } 
                     ] 
    }, 
    {
         ' title ':' rights management ' ,
         ' icon ':' EL-icon-S-Check ' ,
         ' ID ': 2 ,
         ' Children ': [{' title ':' permissions list ',' url ':' / rbac / rights / list ','ID': 2 }, 
                     { 'title': 'role list', 'URL': '/ RBAC / Roles', 'ID':. 7 }, 
                     {'title': 'menu list', 'URL': '/ CRM / Menus', 'ID': 12 is } 
                     ] 
    } 
}

menus_list

(4) the formation of acquired getters:

    computed: { 
      ... mapGetters ({ 
        // Get getters processed through state data 
        menusList: 'Homes / getMenu' , 
      }) 
    }    

(5) In the left loop menus_list home components:

      <el-aside class="aside" width="200px">
        <!--开启路由模式-->
        <el-menu
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :unique-opened="true"
          :router="true"
        >

          <el-submenu v-for="(item,index) in menusList" :key="index" :index="''+item.id">
            <template slot="title">
              <i :class="item.icon"></i>
              <span>{{item.title}}</span>
            </template>
            <el-menu-item v-for="(item1,index) in item.children" :key="index" :index="item1.url">
              <span>{{item1.title}}</span>
            </el-menu-item>
          </el-submenu>

        </el-menu>
      </el-aside>

Note: The router url at this time of need and index url consistent.

In this case, the results page will be presented:

 

2, access to the right information

To the front right information is to do what? Here mainly on the button add, delete, change limit, if the user has permission to them, the button will show up, if not hidden. Suppose now that the user has permission to add a user's role:

 

 If you remove the add user permissions that role:

 

(1) permissions information when logging into Home after the acquisition, send ajax request method home assembly created in.

  Created () {
     // calls the method to get permission 
     the this .getPermissions () 
    }, 

    Methods: { 
      the getPermissions () { 
        // Get permission authority information for a push button test 
        the this . store.dispatch $ ( 'the getPermissions', {_ the this: the this }) 
      } 
}

 (2) the required permissions to use many components, so define a global action, mutations, getters and state

In action.js file:

export default {

    async getPermissions(context, object) {
      const res = await object._this.$http.get("rbac/roles/rights");
      const {data, meta: {message, code}} = res.data;
      if (code === 2000) {
        context.commit("GETPERMISSIONS", data);
        object._this.$message.error(message)
        console.log('permissions', data)
      }
    }

}

In mutations.js file:

//根节点mutations

export default {
   GETPERMISSIONS(state, data) {
     console.log('mutation',data)
      state.permissions_dict = data
    }
}

In getters.js file:

//根节点getters

export default {

  getPermission: state => {
    console.log('getters',state)
    return state.permissions_dict
  }

}

In state.js file:

// root state 

Export default { 
      permissions_dict: {} 
}

(3) to get the right data format

{
    '/crm/dept': ['get'],
    '/crm/menus': ['get'],
    '/rbac/roles': ['get'],
    '/rbac/roles/(?P<roleId>\\d+)/permission$': ['put'],
    '/rbac/rights/list': ['get'],
    '/rbac/roles/(?P<roleId>\\d+)/permission/(?P<permissionId>\\d+)$': ['delete'],
    '/crm/user': ['get', 'post']
}

permissions_dict

(4) acquires the rights data of the components requires

    computed: {

      ...mapGetters({

        permissionDict: 'getPermission'

      }),

    }

(5) determines the permission button

      <el-col :span="5">
        <el-button v-if="permissionDict['/crm/user'].indexOf('post')>=0?true:false" type="success" @click="showadduser">添加用户</el-button>
      </el-col>

Url need to use is the key, to request a list of ways to value, to determine whether the manner requested in this list, if there is to prove that the user role has this permission, otherwise no.