Vue 自定义指令实现按钮级别的权限控制

在我们的日常开发过程中,通常会对菜单进行权限划分,如果粒度要求的比较细的话,还会对页面按钮进行权限划分,本次文章来介绍一下如果使用Vue的自定义指令来实现按钮级别的权限划分。

Vue:指令(directive)简介

Vue里v-modelv-show等都属于核心指令,除此之外,也可以自己写一些自定义指令。虽然和组件(components)比起来,这些属于锦上添花的小技巧,不过对于大面积的使用,抽取出一些公共方法,放到指令里,有时候能起到事半功倍的效果。

指令可以通过全局注册,也可以局部注册,这一点和组件类似。

指令提供的钩子函数:

  • bind(绑定到元素时调用)
  • unbind(解绑时调用)
  • inserted(被绑定元素插入到父节点时调用)
  • update(被绑定元素所在的模版更新时调用)
  • componentUpdate(被绑定元素所在模版完成一次更新周期时调用)。

这几个钩子函数的参数:el(指令绑定的元素)、bindingvnodeoldVnode,其中binding是个很有意思的参数。

binding 参数是一个对象,包含如下属性:

  • name:指令名,不包括 v- 前缀。
  • value:指令的绑定值。
  • oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用,无论值是否改变都可用。
  • expression:绑定值的字符串形式。 例如 v-my-directive=”1 + 1″ , expression 的值是 “1 + 1″。
  • arg:传给指令的参数。例如 v-my-directive:foo, arg 的值是 “foo”。
  • modifiers:一个包含修饰符的对象。 例如: v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

我们用到的知识点,都已经有了一个简单的介绍,下面我们直接通过代码演示的方式,实现功能了。

功能实现

新建自定义指令

src/directive/permission/permisaction.js

注册指令

src/directive/permission/index.js

后端得到权限标识数据

从后端拿到权限标识数据,然后存入到 Vuex 中,方便上面的步骤调用。

src/store/modules/user.js

src/store/getters.js

在这个文件 src/permission.js 添加如下内容:

Vue 自定义指令实现按钮级别的权限控制

注册指令到全局

添加一下内容:

本文为原创文章,未经授权禁止转载本站文章。
原文出处:兰玉磊的个人博客
原文链接:https://www.fdevops.com/2021/05/29/vue-30814
版权:本文采用「署名-非商业性使用-相同方式共享 4.0 国际」知识共享许可协议进行许可。

发表评论

邮箱地址不会被公开。 必填项已用*标注