按部就班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）--- 功能点管理及权限控制