elementui权限管理,element ui按钮权限控制
在一个业务管理系统中，如果需要实现权限控制功能，需要定义相应的权限功能点，然后在界面中绑定界面元素的功能点，这样就可以在后台动态分配权限进行动态控制。权限功能点由角色控制，简称RBAC。
目录
概述1。权限功能点管理2。VUE元素前端权限控制
概述
本文介绍了功能点管理和权限控制。功能点作为业务对象数据进行管理，并在角色类别中进行分配。在界面元素的控制上，Vue自定义指令指令被引入到VUE元素的前端进行控制。
1、权限功能点管理
我们之前已经分析了权限系统的表和关系的描述，如下所示。
权限点的管理就是TB_Function表的管理，也就是我们为系统控制定义的功能点。
功能点的管理包括树形列表管理和展现其树形结果的明细表管理，如下图所示。
功能点的查看界面如下图所示。除了显示相应功能点的详细信息外，还列出了哪些角色拥有和使用该功能点。
一个功能点的新建界面如下图所示，主要是选择父节点，输入功能点的信息。
为了方便批量录入权限功能节点，我们可以基于业务表进行批量录入，如下图所示。
这样添加客户信息的功能点名称会自动变成：Customer/Add，其他类似，这样就可以快速添加该业务表的相关功能点。
有了这些功能点的定义，我们就可以结合角色管理把它们分配给不同的角色。在角色编辑界面，为角色分配不同的权限控制点，如下所示。
2、VUE+Element 前端权限控制
前面的内容介绍了权限功能点的管理和基于角色的权限分配处理，都是为界面元素的前端权限控制做准备。
首先我们需要按照ABP后端的接口封装前端JS类。如前所述，GET/GET ALL/CREATE/UPDATE/DELETE/COUNT等常规接口都是在BaseApi基类中定义的，其他子类可以继承。
该模块涉及用户管理、组织管理、角色管理、菜单管理、功能管理、审计日志、登录日志等业务类。然后这些类继承了BaseApi，并且会有相关的接口，如下面的继承关系所示。
因为与用户相关的菜单和权限集都在用户类别中，所以我们可以在UserApi中定义相应的后端接口调用。
GetGrantedFunctionsByUser方法是获取指定用户的权限功能点集的函数。
UserApi的类文件user.js的内容如下。
GetGrantedFunctionsByUser方法是获取指定用户的权限功能点集的函数。功能代码如下所示。
GetGrantfunctionsbyuser(id){//获取用户权限列表。
退货请求({
URL:this . baseurl GetGrantedFunctionsByUser ，
方法：“get”，
参数：{ id }
})
}
在用户的Store/Modules/user.js中，我们添加了一个功能点的状态信息，如下图所示。
然后在用户每次获取信息时，存储其功能点信息，这样界面就可以根据存储的内容控制相应的权限。
添加一个函数来设置突变中的用户状态信息，如下所示。
SET _ permissions:(state，permissions)={
州许可证=许可证
}
这样，在用户信息获取的getInfo函数中，我们可以顺便一起获取用户的权限功能点的信息集合。
//获取用户信息
getInfo({ commit，state }) {
返回新承诺((解决，拒绝)={
user.getInfo(state.userid)。然后(response={
常数{结果}=响应
...
提交( SET_ROLES ，{ roles，roleNames })
提交(集合名称，名称)
提交( SET_INTRODUCTION ，全名)
//获取用户权限
用户。GetGrantedFunctionsByUser(state . userid)。然后(data={
var list=data.result.items
如果(列表){
var许可=[]
list.forEach(element={
if(element element . name type of(element . name)！==未定义){
permiss . push(element . name . to lower case())//小写
}
});
//设置用户功能权限点
提交( SET _ permissions ，permissions)
}
})
解决(结果)
}).catch(错误={
拒绝(错误)
})
})
},
现在前端也有了这些权限功能点控件集，这些是当前登录用户对应的可访问权限集。
下一步就是根据这些权限集来控制界面元素，比如一些操作按钮，比如添加、编辑、删除、导入、导出等等，是否可以显示和管理。
该操作是为Vue设计的自定义指令操作。如果你不知道自定义指令的用法，请参考官方介绍：https://cn.vuejs.org/v2/guide/custom-directive.html.
如果我们定义了一个v-permit的自定义指令来处理权限功能点的绑定，那么接口应该是这样处理的。
El-row style= float:right；底部填充：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( search form ) reset/El-button
El-button v-permit=[ user/add ] icon= El-icon-plus type= success size= mini round @ click= showadd() add/El-button
El-button v-permit=[ user/import ] icon= El-icon-upload 2 type= warning size= mini round @ click= show import() import/El-button
El-button v-permit=[ user/export ] icon= El-icon-download type= warning size= mini round @ click= show import() export/El-button
/el-row
通过类似v-permit=[User/add]的操作，可以指定该操作按钮的功能点。如果用户有这些功能点，就可以使用，否则不显示。
我们在指令目录下定义了一个permit.js的自定义指令文件，用于相应的处理。
然后在index.js的发布文件中定义加载处理逻辑，如下面的代码所示
从进口许可证。/许可证
const install=function(Vue) {
Vue.directive(许可证，允许)
}
如果(窗口。Vue) {
窗口[许可证]=许可证
//eslint-disable-next-line no-undef
Vue.use(安装)
}
permission.install=安装
导出默认权限
最后，在main.js中全局加载自定义指令的操作如下面的代码所示。
//全局引入和使用权限控制点的自定义指令。
从导入权限。/指令/权限
Vue.use(权限)
有了store模块中的状态信息和自定义命令的支持，就可以使用这些权限点来控制界面上相应的按钮元素。
以上是Vue元素前端应用开发的功能点管理和权限控制的详细内容。更多关于Vue的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。