Vue权限指令控制权限详解
作者：聂大哥
在日常的开发过程中，我们除了使用Vue已有的指令之外，还需自定义指令，需要对DOM节点进一步操作。
在后台系统中，最常用的就是权限指令。
权限控制的原理就是在系统当前界面初始化时，判断某些DOM节点有没有权限，没有则移除此DOM。
在Vue中使用指令权限时，通常有两种控制节点的方法。第一个是对普通节点的指令控制（普通节点即是指 html 中的标签节点。），第二个则是对elementUI组件的控制。
为什么分两种呢？是因为在实际开发过程中，我发现自定义指令有时候无法移除element中的组件，例如：在使用el-tab时，下面包含了多个tab页，当某个tab页无权限访问时 想要对其进行移除，这时候自定义的指令只能移除此tab页内的内容，并不能够将此tab页一起移除。所以这时候会使用v-if进行控制。
第一种-自定义权限指令
我的写法是新建permission文件夹，此文件夹下面包含index.js、permission.js，接下来直接上代码：
index.js
import permission from './permission'
import Vue from 'vue'
Vue.directive('permission', permission)
permission.js
import store from '@/store'
async function checkPermission(el, binding) {
const { value } = binding
const roles = await store.getters && store.getters.permission
if( value && value instanceof Array) {
if( value.length > 0) {
const permissionRoles = value
const hasPermission = roles.some(role => {
return permissionRoles.includes(role)
})
if(!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}
}
}else {
throw new Error('需要以数组的形式传角色')
}
}
export default {
inserted(el, binding) {
checkPermission(el, binding)
},
update(el, binding) {
checkPermission(el, binding)
}
}在这里面需要解释的是权限列表的获取，我的权限列表是存储在store的permission中，所以在进入的时候直接获取permission。
最重要的一步，需要将index.js引入到main.js中去执行。
main.js
import './permission' // 此引入需要在创建Vue实例之前引用
用法：
<el-button v-permission="['add']">权限按钮</el-button>
第二种：v-if自定义控制
如果使用第一种方式的话，其是移除当前DOM下的子节点，是没办法移除当前节点的。所以这时候就需要通过自定义的v-if来控制。
思路：v-if中执行一个函数，函数传入一个权限值。在函数中判断权限值是否属于权限菜单内，返回布尔类型值。
这时我们想到，如果要定义一个函数在任何组件中都可以使用，那么要么是工具类函数，要么是mixins。如果是封装工具类函数，则没办法直接在模板中使用，而是需要在methods中使用，所以我们直接选择mixins，混入方法。
我们创建控制节点的文件controlNode.js
import store from "@/store"
export default {
methods: {
controlNode(node) {
const permission = store.getters.permission
let result = permission.includes(node)
return result
}
}
}用法：
在组件中使用mixins
<template>
<div>
<el-tabs>
<el-tab-pane v-if="controlNode('add')"></el-tab-pane>
<el-tab-pane></el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import controlNode from "@/permission/controlNode"
export default {
name: "component",
mixins: [controlNode]
}
</script>最后说明
为什么控制节点权限要分两种情况？同样都是移除节点，为什么还要用v-if？
如果你仔细观察代码，在第一种方式中，我们移除的是 child，是将当前节点的子元素进行移除，此时当前节点依然存在。所以就出现了所分的两种情况。
那有没有办法用自定义的指令就可以完成移除呢？那当然是有的，在第一种方式中，只需要将removeChild改为remove即可。即将移除子元素改为移除当前节点本身。
到此这篇关于Vue权限指令控制权限详解的文章就介绍到这了,更多相关Vue权限指令内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！