在一個業務管理系統中，如果我們需要實現權限控制功能，我們需要定義好對應的權限功能點，然后在界面中對界面元素的功能點進行綁定，這樣就可以在后台動態分配權限進行動態控制了，一般來說，權限功能點是針對角色進行控制的，也就是簡稱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模塊里面的狀態信息，以及自定義指令的支持，在界面上對應按鈕元素上，就可以利用這些權限點進行控制操作了。
為了方便讀者理解，我列出一下前面幾篇隨筆的連接，供參考：
循序漸進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 前端應用開發(10）--- 基於vue-echarts處理各種圖表展示
循序漸進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）--- 功能點管理及權限控制
循序漸進VUE+Element 前端應用開發(19）--- 后端查詢接口和Vue前端的整合
使用代碼生成工具快速生成基於ABP框架的Vue+Element的前端界面
循序漸進VUE+Element 前端應用開發(20）--- 使用組件封裝簡化界面代碼
循序漸進VUE+Element 前端應用開發(21）--- 省市區縣聯動處理的組件使用
循序漸進VUE+Element 前端應用開發(22）--- 簡化main.js處理代碼，抽取過濾器、全局界面函數、組件注冊等處理邏輯到不同的文件中
循序漸進VUE+Element 前端應用開發(23）--- 基於ABP實現前后端的附件上傳，圖片或者附件展示管理
循序漸進VUE+Element 前端應用開發(24）--- 修改密碼的前端界面和ABP后端設置處理
循序漸進VUE+Element 前端應用開發(25）--- 各種界面組件的使用（1）
循序漸進VUE+Element 前端應用開發(26）--- 各種界面組件的使用（2）
循序漸進VUE+Element 前端應用開發(27）--- 數據表的動態表單設計和數據存儲
循序漸進VUE+Element 前端應用開發(28）--- 附件內容的管理
循序漸進VUE+Element 前端應用開發(29）--- 高級查詢條件的界面設計
部署基於.netcore5.0的ABP框架后台Api服務端，以及使用Nginx部署Vue+Element前端應用
循序漸進VUE+Element 前端應用開發(30）--- ABP后端和Vue+Element前端結合的分頁排序處理
循序漸進VUE+Element 前端應用開發(31）--- 系統的日志管理，包括登錄日志、接口訪問日志、實體變化歷史日志
循序漸進VUE+Element 前端應用開發(32）--- 手機短信動態碼登陸處理
循序漸進VUE+Element 前端應用開發(33）--- 郵件參數配置和模板郵件發送處理
使用Vue-TreeSelect組件實現公司-部門-人員級聯下拉列表的處理
使用Vue-TreeSelect組件的時候，用watch變量方式解決彈出編輯對話框界面無法觸發更新的問題