Vue Element前端應用開發之功能點管理及權限控制

本篇隨筆介紹功能點管理及權限控制，功能點是作為一個業務對象數據進行管理，在角色范疇上進行分配，而在界面元素控制上，VUE+Element 前端引入Vue自定義指令Directives進行控制。

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

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

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

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

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

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

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

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

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

首先我們需要根據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 = installexport default permission

最后，在main.js里面全局裝載自定義指令的操作，如下代碼所示。

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

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

以上就是Vue Element前端應用開發之功能點管理及權限控制的詳細內容，更多關于Vue的資料請關注好吧啦網其它相關文章！