vue directive全局自定义指令实现按钮级别权限控制的操作方法

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

全局自定义指令项目应用

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

到此这篇关于vue directive全局自定义指令实现按钮级别权限控制的文章就介绍到这了,更多相关vue directive按钮级别权限控制内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论