循序渐进VUE+Element 前端应用开发(18)— 功能点管理及权限控制,循序渐进VUE+Element 前端应用开发(5)— 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)— 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)— 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)— 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(13)— 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(17)— 菜单管理

在一个营业治理系统中,若是我们需要实现权限控制功效,我们需要界说好对应的权限功效点,然后在界面中对界面元素的功效点举行绑定,这样就可以在后台动态分配权限举行动态控制了,一般来说,权限功效点是针对角色举行控制的,也就是简称RBAC(Role Based Access Control)。在前面随笔中,我们先容了菜单资源,在权限治理系统中,菜单也是属于权限控制的一个资源,其也是作用于角色层面上的。本篇随笔先容功效点治理及权限控制,功效点是作为一个营业工具数据举行治理,在角色范围上举行分配,而在界面元素控制上,VUE+Element 前端引入Vue自界说指令Directives举行控制。

1、  权限功效点治理

我们在前面剖析过一个权限系统的表和关系的说明,如下所示。

循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制,循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(17)--- 菜单管理

权限功效点的治理就是对TB_Function的表的治理操作,这个表是我们界说用于系统控制的功效点。

权限功效点的治理为了展示它的树状效果,包罗树列表的治理和明细列表的治理,如下图所示。

循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制,循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(17)--- 菜单管理

功效点的查看界面如下所示,除了展示对应功效点的详细信息外,还列出这个功效点被那些角色拥有使用。

循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制,循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(17)--- 菜单管理

 功效点的新增界面如下所示,主要就是选择父节点和录入功效点的信息即可。

循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制,循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(17)--- 菜单管理

而为了加倍利便批量录入权限功效点,我们可以以营业表为基础举行批量录入,如下所示。

循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制,循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(17)--- 菜单管理

这样添加客户信息的功效点名称,会自动变为:Customer/Add,其他的类似,这样可以快速添加针对这个营业表的相关功效点。

有了这些功效点的界说,我们就可以连系角色治理举行分配给差别的角色了。如下是在角色编辑界面中,为角色分配差别的权限控制点。

循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制,循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(17)--- 菜单管理

 

2、VUE+Element 前端权限控制

前面内容先容了权限功效点的治理,以及基于角色的权限实现分配处置,这些都为前端实现界面元素的权限控制做准备的。

首先我们需要凭据ABP后端的接口举行前端JS端的类的封装处置,其中前面说过,通例的Get/GetAll/Create/Update/Delete/Count等接口,我们放在BaseApi基类内里界说,其他子类继续它即可。

权限模块我们涉及到的用户治理、机构治理、角色治理、菜单治理、功效治理、审计日志、登录日志等营业类,那么这些类继续BaseApi,就会具有相关的接口了,如下所示继续关系。

循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制,循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(17)--- 菜单管理

由于用户相关的菜单、权限聚集是在用户范围内里,我们可以在UserApi内里界说对应的后端接口挪用。

循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制,循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(17)--- 菜单管理

 其中 GetGrantedFunctionsByUser 方式就是获取指定用户的权限功效点聚集的函数。

UserApi的类文件user.js内容如下所示。

循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制,循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(17)--- 菜单管理

 

 其中 GetGrantedFunctionsByUser 方式就是获取指定用户的权限功效点聚集的函数,函数代码如下所示。

  GetGrantedFunctionsByUser(id) { // 获取用户权限列表
    return request({
      url: this.baseurl + 'GetGrantedFunctionsByUser',
      method: 'get',
      params: { id }
    })
  }

 

在用户的Store/Modules/user.js内里,我们增添一个功效点的状态信息,如下所示。

循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制,循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(17)--- 菜单管理

然后在用户每次获取信息的时刻,把它的功效点信息也存储起来,那么界面就可以凭据这个存储内容举行响应的权限控制了。

在Mutation内里添加一个设置用户状态信息的函数,如下所示。

.NET Core微服务开发网关篇-ocelot

  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的自界说指令文件,用来举行响应的处置的。

循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制,循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(17)--- 菜单管理

 

然后在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 前端应用开发(18)--- 功能点管理及权限控制,循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理,循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理,循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用,循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理,循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理,循序渐进VUE+Element 前端应用开发(17)--- 菜单管理

 

为了利便读者明白,我列出一下前面几篇随笔的毗邻,供参考:

循序渐进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)— 功效点治理及权限控制  

 

原创文章,作者:dddof新闻网,如若转载,请注明出处:https://www.dddof.com/archives/29523.html