轉載   原文作者：伍華聰    原文地址：https://www.cnblogs.com/wuhuacong/p/13305509.html

在一個業務管理系統中，如果我們需要實現許可權控制功能，我們需要定義好對應的許可權功能點，然後在介面中對介面元素的功能點進行繫結，這樣就可以在後臺動態分配許可權進行動態控制了，一般來說，許可權功能點是針對角色進行控制的，也就是簡稱RBAC（Role Based Access Control）。在前面隨筆中，我們介紹了選單資源，在許可權管理系統中，選單也是屬於許可權控制的一個資源，其也是作用於角色層面上的。本篇隨筆介紹功能點管理及許可權控制，功能點是作為一個業務物件資料進行管理，在角色範疇上進行分配，而在介面元素控制上，VUE+Element 前端引入Vue自定義指令Directives進行控制。

1、 許可權功能點管理

我們在前面分析過一個許可權系統的表和關係的說明，如下所示。

許可權功能點的管理就是對TB_Function的表的管理操作，這個表是我們定義用於系統控制的功能點。

許可權功能點的管理為了展示它的樹狀結果，包括樹列表的管理和明細列表的管理，如下圖所示。

功能點的檢視介面如下所示，除了展示對應功能點的詳細資訊外，還列出這個功能點被哪些角色擁有使用。

功能點的新增介面如下所示，主要就是選擇父節點和錄入功能點的資訊即可。

而為了更加方便批量錄入許可權功能點，我們可以以業務表為基礎進行批量錄入，如下所示。

這樣新增客戶資訊的功能點名稱，會自動變為：Customer/Add，其他的類似，這樣可以快速新增針對這個業務表的相關功能點。

有了這些功能點的定義，我們就可以結合角色管理進行分配給不同的角色了。如下是在角色編輯介面中，為角色分配不同的許可權控制點。

2、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模組裡面的狀態資訊，以及自定義指令的支援，在介面上對應按鈕元素上，就可以利用這些許可權點進行控制操作了。