前后端分離進行權限管理之前端獲取菜單及權限信息（三）

一、獲取菜單與權限信息

通過后端API的接口獲取信息：

http://127.0.0.1:8000/rbac/roles/rights #權限接口
http://127.0.0.1:8000/rbac/roles/rmenus #菜單接口

 1、獲取菜單信息

（1）在登錄過后進入主頁時進行菜單信息信息的獲取，在home組件created的方法中發送ajax請求。

    created(){
    //調用獲取菜單的方法
      this.getMenus();
    },

    methods: {
      getMenus(){
        //動態獲取左側菜單
        this.$store.dispatch('homes/getMenu',{_this:this})

      }
}

（2）在home.js文件中：

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）獲取的菜單數據形式：

{
    {
        'title': '用戶管理',
        'icon': 'el-icon-location',
        'id': 1,
        'children': [{'title': '用戶列表', 'url': '/crm/user', 'id': 1},
                     {'title': '部門列表', 'url': '/crm/dept', 'id': 11}
                     ]
    },
    {
        'title': '權限管理',
        'icon': 'el-icon-s-check',
        'id': 2,
        'children': [{'title': '權限列表', 'url': '/rbac/rights/list', 'id': 2},
                     {'title': '角色列表', 'url': '/rbac/roles', 'id': 7},
                     {'title': '菜單列表', 'url': '/crm/menus', 'id': 12}
                     ]
    }
}

（4）組建中獲取getters:

    computed:{
      ...mapGetters({
        //獲取經過getters處理過的state數據
        menusList:'homes/getMenu',
      })
    }    

（5）在home組件左側循環menus_list：

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

注意：路由器中的url此時需要和index中的url保持一致。

此時，頁面效果就可以呈現出來：

 

2、 獲取權限信息

前端要權限信息是做什么呢？這里主要是對按鈕的增、刪、改進行限制，用戶如果有其中的權限，按鈕就顯現出來，如果沒有就隱藏起來。假設現在該用戶角色擁有添加用戶的權限：

 

 如果去掉該角色的添加用戶權限：

 

（1）在登錄過后進入主頁時進行權限信息的獲取，在home組件created的方法中發送ajax請求。

  created(){
    //調用獲取權限的方法
     this.getPermissions()
    },

    methods: {
      getPermissions(){
        //獲取權限信息用於按鈕權限檢驗
        this.$store.dispatch('getPermissions',{_this:this})
      },
}

 （2）權限需要在很多組件中使用，所以定義全局action、mutations、getters以及state

在action.js文件中：

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

}

在mutations.js文件中：

//根節點mutations

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

在getters.js文件中：

//根節點getters

export default {

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

}

在state.js文件中：

//根節點狀態

export default {
      permissions_dict: {}
}

（3）獲取到的權限數據格式

{
    '/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']
}

（4）在需要使用的組件中獲取權限數據

    computed: {

      ...mapGetters({

        permissionDict: 'getPermission'

      }),

    }

（5）在權限按鈕處進行判斷

      <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為鍵值，以請求方式的列表為值，判斷請求方式是否在這個列表中，如果存在就證明該用戶角色有這個權限，否則就沒有。