在日常项目中通常会需要根据后台接口返回的数据来判断当前用户的按钮操作权限。对于当前登录用户来说只有在当前按钮有该权限时才显示此按钮当前按钮没有这个权限时就不显示这个按钮。针对这种场景可以通过 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 }。

vnodeVue编译生成的虚拟节点。

oldVnode上一个虚拟节点仅在 update 和 componentUpdated 钩子中可用。

除了 el 之外其它参数都应该是只读的。

全局自定义指令项目应用

应用场景自定义一个权限指令对需要权限判断的 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>