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

时间:2023-03-20 ＊且听风吟人气:0

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

加载全部内容