按部就班VUE+Element 前端應用開發(18）--- 功能點管理及權限控制

在一個業務管理系統中，若是咱們須要實現權限控制功能，咱們須要定義好對應的權限功能點，而後在界面中對界面元素的功能點進行綁定，這樣就能夠在後臺動態分配權限進行動態控制了，通常來講，權限功能點是針對角色進行控制的，也就是簡稱RBAC（Role Based Access Control）。在前面隨筆中，咱們介紹了菜單資源，在權限管理系統中，菜單也是屬於權限控制的一個資源，其也是做用於角色層面上的。本篇隨筆介紹功能點管理及權限控制，功能點是做爲一個業務對象數據進行管理，在角色範疇上進行分配，而在界面元素控制上，VUE+Element 前端引入Vue自定義指令Directives進行控制。

一、  權限功能點管理

咱們在前面分析過一個權限系統的表和關係的說明，以下所示。

權限功能點的管理就是對TB_Function的表的管理操做，這個表是咱們定義用於系統控制的功能點。

權限功能點的管理爲了展現它的樹狀結果，包括樹列表的管理和明細列表的管理，以下圖所示。

功能點的查看界面以下所示，除了展現對應功能點的詳細信息外，還列出這個功能點被那些角色擁有使用。

 功能點的新增界面以下所示，主要就是選擇父節點和錄入功能點的信息便可。

而爲了更加方便批量錄入權限功能點，咱們能夠以業務表爲基礎進行批量錄入，以下所示。

這樣添加客戶信息的功能點名稱，會自動變爲：Customer/Add，其餘的相似，這樣能夠快速添加針對這個業務表的相關功能點。

有了這些功能點的定義，咱們就能夠結合角色管理進行分配給不一樣的角色了。以下是在角色編輯界面中，爲角色分配不一樣的權限控制點。

 

二、VUE+Element 前端權限控制

前面內容介紹了權限功能點的管理，以及基於角色的權限實現分配處理，這些都爲前端實現界面元素的權限控制作準備的。

首先咱們須要根據ABP後端的接口進行前端JS端的類的封裝處理，其中前面說過，常規的Get/GetAll/Create/Update/Delete/Count等接口，咱們放在BaseApi基類裏面定義，其餘子類繼承它便可。

權限模塊咱們涉及到的用戶管理、機構管理、角色管理、菜單管理、功能管理、審計日誌、登陸日誌等業務類，那麼這些類繼承BaseApi，就會具備相關的接口了，以下所示繼承關係。

因爲用戶相關的菜單、權限集合是在用戶範疇裏面，咱們能夠在UserApi裏面定義對應的後端接口調用。

 其中 GetGrantedFunctionsByUser 方法就是獲取指定用戶的權限功能點集合的函數。

UserApi的類文件user.js內容以下所示。

 

 其中 GetGrantedFunctionsByUser 方法就是獲取指定用戶的權限功能點集合的函數，函數代碼以下所示。

  GetGrantedFunctionsByUser(id) { // 獲取用戶權限列表
    return request({
      url: this.baseurl + 'GetGrantedFunctionsByUser',
      method: 'get',
      params: { id }
    })
  }

 

在用戶的Store/Modules/user.js裏面，咱們增長一個功能點的狀態信息，以下所示。

而後在用戶每次獲取信息的時候，把它的功能點信息也存儲起來，那麼界面就能夠根據這個存儲內容進行相應的權限控制了。

在Mutation裏面添加一個設置用戶狀態信息的函數，以下所示。

  SET_PERMITS: (state, permits) => {
    state.permits = permits
  }

這樣咱們在用戶信息獲取的getInfo函數裏面，就能夠順便一塊兒獲取用戶的包含的權限功能點信息集合了。

  // 獲取用戶信息
  getInfo({ commit, state }) {
    return new Promise((resolve, reject) => {
      user.getInfo(state.userid).then(response => {
        const { result } = response
       
        ....................

        commit('SET_ROLES', { roles, roleNames })
        commit('SET_NAME', name)
        commit('SET_INTRODUCTION', fullName)

        // 獲取用戶權限
        user.GetGrantedFunctionsByUser(state.userid).then(data => {
          var list = data.result.items
          if (list) {
            var permits = []
            list.forEach(element => {
              if (element && element.name && typeof (element.name) !== 'undefined') {
                permits.push(element.name.toLowerCase()) // 小寫
              }
            });
            // 設置用戶功能權限點
            commit('SET_PERMITS', permits) } })

        resolve(result)
      }).catch(error => {
        reject(error)
      })
    })
  },

如今前端也有這些權限功能點控制集合了，這些就是對應當前登陸用戶的可訪問權限集合了。

接下來的就是須要根據這些權限集合，進行界面元素的控制了，如對一些操做按鈕，如新增、編輯、刪除、導入、導出等操做的按鈕是否能夠顯示進行管理。

這個操做就是設計到Vue的自定義指令操做了，如不瞭解的自定義Directives的使用的，能夠參考下官方介紹：https://cn.vuejs.org/v2/guide/custom-directive.html 

如咱們定義一個v-permit 的自定義指令來處理權限功能點的綁定處理，那麼界面應該以下處理。

    <el-row style="float:right;padding-bottom:10px">
      <el-button icon="el-icon-search" type="primary" size="mini" round @click="search()">查詢</el-button>
      <el-button icon="el-icon-refresh-left" type="warning" size="mini" round plain @click="resetSeachForm('searchForm')">重置</el-button>
      <el-button v-permit="['User/add']" icon="el-icon-plus" type="success" size="mini" round @click="showAdd()">添加</el-button>
      <el-button v-permit="['User/import']" icon="el-icon-upload2" type="warning" size="mini" round @click="showImport()">導入</el-button>
      <el-button v-permit="['User/export']" icon="el-icon-download" type="warning" size="mini" round @click="showImport()">導出</el-button>
    </el-row>

經過相似 v-permit="['User/add']" 的方式操做，就能夠指定這個操做按鈕的功能點，若是用戶具備這些功能點，那麼就可使用，不然就不顯示了。

咱們在directive目錄中定義一個permit.js的自定義指令文件，用來進行相應的處理的。

 

而後在index.js的發佈文件裏面定義裝載處理邏輯，以下代碼所示

import permit from './permit'

const install = function(Vue) {
  Vue.directive('permit', permit)
}

if (window.Vue) {
  window['permit'] = permit
  // eslint-disable-next-line no-undef
  Vue.use(install)
}

permission.install = install
export default permission

最後，在main.js裏面全局裝載自定義指令的操做，以下代碼所示。

// 全局引入並使用權限控制點的自定義指令
import permission from './directive/permission'
Vue.use(permission)

有了store模塊裏面的狀態信息，以及自定義指令的支持，在界面上對應按鈕元素上，就能夠利用這些權限點進行控制操做了。

 

爲了方便讀者理解，我列出一下前面幾篇隨筆的鏈接，供參考：

按部就班VUE+Element 前端應用開發(1）--- 開發環境的準備工做

按部就班VUE+Element 前端應用開發(2）--- Vuex中的API、Store和View的使用

按部就班VUE+Element 前端應用開發(3）--- 動態菜單和路由的關聯處理

按部就班VUE+Element 前端應用開發(4）--- 獲取後端數據及產品信息頁面的處理

按部就班VUE+Element 前端應用開發(5）--- 表格列表頁面的查詢，列表展現和字段轉義處理

按部就班VUE+Element 前端應用開發(6）--- 常規Element 界面組件的使用

按部就班VUE+Element 前端應用開發(7）--- 介紹一些常規的JS處理函數

按部就班VUE+Element 前端應用開發(8）--- 樹列表組件的使用

按部就班VUE+Element 前端應用開發(9）--- 界面語言國際化的處理

按部就班VUE+Element 前端應用開發(11）--- 圖標的維護和使用

按部就班VUE+Element 前端應用開發(12）--- 整合ABP框架的前端登陸處理

按部就班VUE+Element 前端應用開發(13）--- 前端API接口的封裝處理

按部就班VUE+Element 前端應用開發(14）--- 根據ABP後端接口實現前端界面展現

按部就班VUE+Element 前端應用開發(15）--- 用戶管理模塊的處理

按部就班VUE+Element 前端應用開發(16）--- 組織機構和角色管理模塊的處理 

按部就班VUE+Element 前端應用開發(17）--- 菜單管理

按部就班VUE+Element 前端應用開發(18）--- 功能點管理及權限控制