概述

本篇隨筆介紹功能點(diǎn)管理及權(quán)限控制，功能點(diǎn)是作為一個(gè)業(yè)務(wù)對(duì)象數(shù)據(jù)進(jìn)行管理，在角色范疇上進(jìn)行分配，而在界面元素控制上，VUE+Element 前端引入Vue自定義指令Directives進(jìn)行控制。

1、權(quán)限功能點(diǎn)管理

我們?cè)谇懊娣治鲞^(guò)一個(gè)權(quán)限系統(tǒng)的表和關(guān)系的說(shuō)明，如下所示。

權(quán)限功能點(diǎn)的管理就是對(duì)TB_Function的表的管理操作，這個(gè)表是我們定義用于系統(tǒng)控制的功能點(diǎn)。

權(quán)限功能點(diǎn)的管理為了展示它的樹(shù)狀結(jié)果，包括樹(shù)列表的管理和明細(xì)列表的管理，如下圖所示。

功能點(diǎn)的查看界面如下所示，除了展示對(duì)應(yīng)功能點(diǎn)的詳細(xì)信息外，還列出這個(gè)功能點(diǎn)被那些角色擁有使用。

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

而為了更加方便批量錄入權(quán)限功能點(diǎn)，我們可以以業(yè)務(wù)表為基礎(chǔ)進(jìn)行批量錄入，如下所示。

這樣添加客戶信息的功能點(diǎn)名稱(chēng)，會(huì)自動(dòng)變?yōu)椋篊ustomer/Add，其他的類(lèi)似，這樣可以快速添加針對(duì)這個(gè)業(yè)務(wù)表的相關(guān)功能點(diǎn)。

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

2、VUE+Element 前端權(quán)限控制

前面內(nèi)容介紹了權(quán)限功能點(diǎn)的管理，以及基于角色的權(quán)限實(shí)現(xiàn)分配處理，這些都為前端實(shí)現(xiàn)界面元素的權(quán)限控制做準(zhǔn)備的。

首先我們需要根據(jù)ABP后端的接口進(jìn)行前端JS端的類(lèi)的封裝處理，其中前面說(shuō)過(guò)，常規(guī)的Get/GetAll/Create/Update/Delete/Count等接口，我們放在BaseApi基類(lèi)里面定義，其他子類(lèi)繼承它即可。

權(quán)限模塊我們涉及到的用戶管理、機(jī)構(gòu)管理、角色管理、菜單管理、功能管理、審計(jì)日志、登錄日志等業(yè)務(wù)類(lèi)，那么這些類(lèi)繼承BaseApi，就會(huì)具有相關(guān)的接口了，如下所示繼承關(guān)系。

由于用戶相關(guān)的菜單、權(quán)限集合是在用戶范疇里面，我們可以在UserApi里面定義對(duì)應(yīng)的后端接口調(diào)用。

其中GetGrantedFunctionsByUser 方法就是獲取指定用戶的權(quán)限功能點(diǎn)集合的函數(shù)。

UserApi的類(lèi)文件user.js內(nèi)容如下所示。

其中GetGrantedFunctionsByUser 方法就是獲取指定用戶的權(quán)限功能點(diǎn)集合的函數(shù)，函數(shù)代碼如下所示。

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

在用戶的Store/Modules/user.js里面，我們?cè)黾右粋€(gè)功能點(diǎn)的狀態(tài)信息，如下所示。

然后在用戶每次獲取信息的時(shí)候，把它的功能點(diǎn)信息也存儲(chǔ)起來(lái)，那么界面就可以根據(jù)這個(gè)存儲(chǔ)內(nèi)容進(jìn)行相應(yīng)的權(quán)限控制了。

在Mutation里面添加一個(gè)設(shè)置用戶狀態(tài)信息的函數(shù)，如下所示。

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

這樣我們?cè)谟脩粜畔@取的getInfo函數(shù)里面，就可以順便一起獲取用戶的包含的權(quán)限功能點(diǎn)信息集合了。

// 獲取用戶信息
  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)

        // 獲取用戶權(quán)限
        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()) // 小寫(xiě)
              }
            });
            // 設(shè)置用戶功能權(quán)限點(diǎn)
            commit('SET_PERMITS', permits)
          }
        })

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

現(xiàn)在前端也有這些權(quán)限功能點(diǎn)控制集合了，這些就是對(duì)應(yīng)當(dāng)前登錄用戶的可訪問(wèn)權(quán)限集合了。

接下來(lái)的就是需要根據(jù)這些權(quán)限集合，進(jìn)行界面元素的控制了，如對(duì)一些操作按鈕，如新增、編輯、刪除、導(dǎo)入、導(dǎo)出等操作的按鈕是否可以顯示進(jìn)行管理。

這個(gè)操作就是設(shè)計(jì)到Vue的自定義指令操作了，如不了解的自定義Directives的使用的，可以參考下官方介紹：https://cn.vuejs.org/v2/guide/custom-directive.html

如我們定義一個(gè)v-permit 的自定義指令來(lái)處理權(quán)限功能點(diǎn)的綁定處理，那么界面應(yīng)該如下處理。

<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()">導(dǎo)入</el-button>
      <el-button v-permit="['User/export']" icon="el-icon-download" type="warning" size="mini" round @click="showImport()">導(dǎo)出</el-button>
    </el-row>

通過(guò)類(lèi)似v-permit="['User/add']"的方式操作，就可以指定這個(gè)操作按鈕的功能點(diǎn)，如果用戶具有這些功能點(diǎn)，那么就可以使用，否則就不顯示了。

我們?cè)赿irective目錄中定義一個(gè)permit.js的自定義指令文件，用來(lái)進(jìn)行相應(yīng)的處理的。

然后在index.js的發(fā)布文件里面定義裝載處理邏輯，如下代碼所示

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里面全局裝載自定義指令的操作，如下代碼所示。

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

有了store模塊里面的狀態(tài)信息，以及自定義指令的支持，在界面上對(duì)應(yīng)按鈕元素上，就可以利用這些權(quán)限點(diǎn)進(jìn)行控制操作了。

以上就是Vue Element前端應(yīng)用開(kāi)發(fā)之功能點(diǎn)管理及權(quán)限控制的詳細(xì)內(nèi)容，更多關(guān)于Vue的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！