vue-element-admin 按钮权限解读

半路接手的项目中用到很多v-permission,知道是控制权限的,没了解具体流程,最近接到列表列级别的权限控制需求,跟了一下代码,分享一下

vue-element-admin 按钮权限解读_第1张图片

首先来看看v-permission干了什么

vue-element-admin 按钮权限解读_第2张图片

1、结构赋值拿到传过来的vaule

vue-element-admin 按钮权限解读_第3张图片

2、获取getter中的roles,可以看见我的roles里并没有 ibTaskAuto:onlyRead 这个角色

vue-element-admin 按钮权限解读_第4张图片

roles信息是在我们登录后通过vuex保存的

vue-element-admin 按钮权限解读_第5张图片

3、通过对比,如果roles中有value值,返回true;否则移除该元素。通过父节点移除而不直接使用removeNode(),因为removeNode方法不兼容部分浏览器。

但这样实际上也有坑,因为有的元素可能找不到父节点,可以看这篇v-if与permisson结合的方式控制权限

展示结果

可以看到,因为没有权限,无法看到input框,实际我是想整列都看不见,el-table找不到对应的父节点控制失败,修改为v-if与permisson结合的方式控制权限

vue-element-admin 按钮权限解读_第6张图片vue-element-admin 按钮权限解读_第7张图片

 自定指令义并使用指令

vue-element-admin 按钮权限解读_第8张图片

 vue-element-admin 按钮权限解读_第9张图片

你可能感兴趣的:(vue相关,vue.js,前端,javascript)