在日常项目中,通常会需要根据后台接口返回的数据,来判断当前用户的按钮操作权限。对于当前登录用户来说,只有在当前按钮有该权限时,才显示此按钮;当前按钮没有这个权限时,就不显示这个按钮。针对这种场景,可以通过 Vue.directive
自定义全局注册指令来进行按钮级别权限控制。
除了默认设置的核心指令( v-model
和 v-show
), vue
允许注册自定义指令,可以对普通 DOM
元素进行底层操作。这是一种有效的的补充和扩展,不仅可以用于定义任何的 dom
操作,而且是可以复用的。
注册一个自定义指令分为:
1)全局注册
2)局部注册
Vue.directive
:用于全局注册或获取全局指令,该指令可以写一个自定义的事件。
Vue.directive(el, hooks)
参数一(el
):自定义指令的名称
参数二(hooks
):自定义指令的钩子函数对象
局部自定义指令是一个对象,对象的属性是自定义指令的名称,对象中属性的值是自定义指令的钩子函数对象。如下:
<template>
<div></div>
</template>
<script>
export default {
directives: {
// 属性名称是自定义的指令名称
// 属性值是自定义指令的钩子函数对象
name: {
}
}
}
</script>
Vue.directive('permission', {
bind: function (el, binding, vnode) {},
inserted: function (el, binding, vnode) {},
update: function (el, binding, vnode, oldVnode) {},
componentUpdated: function (el, binding, vnode, oldVnode) {},
unbind: function (el, binding, vnode) {}
})
自定义指令有五个生命周期(也叫钩子函数),分别是:bind,inserted,update,componentUpdated,unbind
。
bind
:只调用一次,指令第一次绑定到元素时调用。用这个钩子函数可以定义一个绑定时执行一次的初始化设置。( bind
时父节点为 null
,因为 bind
是在 dom
树绘制前调用)inserted
:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中,在 dom
树绘制后调用)。update
:被绑定于元素所在的模板 vNode
更新时调用,但是可能发生在其子 vNode
更新之前。指令的值可能发生了改变,也可能没有。可以通过比较更新前后的绑定值,来忽略不必要的模板更新。componentUpdated
:被绑定元素所在组件的 VNode
及其子 VNode
全部更新后调用。unbind
:只调用一次,指令与元素解绑时调用。自定义指令中传递的常用参数:
el
: 指令所绑定的元素,可以用来直接操作 DOM
。
binding
: 一个对象,包含指令的很多信息。如下:
name
:指令名,不包括 v-
前缀。value
:指令的绑定值,例如:v-my-directive="1 + 1"
中,绑定值为 2
。oldValue
:指令绑定的前一个值,仅在 update
和 componentUpdated
钩子中可用。无论值是否改变都可用。expression
:字符串形式的指令表达式。例如 v-my-directive="1 + 1"
中,表达式为 "1 + 1"
。arg
:传给指令的参数,可选。例如 v-my-directive:foo
中,参数为 "foo"
。modifiers
:一个包含修饰符的对象。例如:v-my-directive.foo.bar
中,修饰符对象为 { foo: true, bar: true }
。vnode
:Vue编译生成的虚拟节点。
oldVnode
:上一个虚拟节点,仅在 update
和 componentUpdated
钩子中可用。
除了 el
之外,其它参数都应该是只读的。
vue.directive
的使用 demo
:
<template>
<div class="demo">
<div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
<p v-color='bgColor'>change color</p>
</div>
</template>
<script>
import Vue from "vue";
// 绑定背景颜色
Vue.directive('color', (el, binding) => { //设置背景颜色
el.style.background = binding.value
})
Vue.directive('demo', {
bind: function (el, binding, vnode) {
var s = JSON.stringify
el.innerHTML =
'name: ' + s(binding.name) + '
' +
'value: ' + s(binding.value) + '
' +
'expression: ' + s(binding.expression) + '
' +
'argument: ' + s(binding.arg) + '
' +
'modifiers: ' + s(binding.modifiers) + '
' +
'vnode keys: ' + Object.keys(vnode).join(', ')
}
})
export default {
name: 'demo',
data () {
return {
message: 'hello world!',
bgColor: ''
}
},
created () {
this.bgColor = 'orange'
}
}
</script>
<style lang='less'>
p {
width: 500px;
}
</style>
应用场景:自定义一个权限指令,对需要权限判断的 Dom
进行显示隐藏。
后端接口返回的权限数据结构为:
{“search”:“搜索”,“create”:“新增新闻”,“edit”:“编辑”,“enable”:“置顶”,“forbidden”:“取消置顶”,“delete”:“删除”}
实现原理:
在 el-button
按钮上设置标签数值,利用 vue
的指令功能获取按钮实例对象和按钮上绑定的标签数值,与从接口拿到的按钮权限数据进行匹配,如果匹配成功,证明用户拥有该按钮的使用权限,如果发现没有使用权限,则在指令处理函数中编写代码移除该按钮,界面上就看不到该按钮了。
在 src
目录下新建 directive
目录,在目录下新建 permission.js
文件:
const permission = {
// 全局注册自定义指令
install (Vue) {
// 使用 inserted 函数,在被绑定元素插入父节点时检测该元素是否有权限
Vue.directive('permission', {
inserted (el, binding, vnode) {
/*el: 指令所绑定的元素,可以用来直接操作DOM。
binding: 一个对象,包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。*/
const path = window.location.hash.slice(1).split('?')[0]
const { value } = binding
// 自定义指令的执行函数,取到登录缓存的按钮权限数组
const power = JSON.parse(window.sessionStorage.power)
const operate = power[path] || {}
if (!operate[value]) {
// 判断是否有权限,如果没有权限,则删除该节点
el.parentNode && el.parentNode.removeChild(el)
}
}
})
}
}
export default permission
在入口文件 src\main.js
里面引入自定义指令:
import permissionfrom './directive/permission'
Vue.use(permission)
在使用的页面,按钮中只需引用v-operate
指令,赋值判断即可:
<el-button @click='delHandle' type="primary" v-permission="'delete'">删除</el-button>