Vue 自定义指令-按钮级权限实现

在 Vue.js 中,指令是一种特殊的属性,可以附加到 HTML 元素上以执行一些操作。我们可以使用自定义指令来实现各种功能,比如:权限控制等。

权限控制是 Web 应用程序中的一个重要问题,基于RBAC(Role-Based Access control)方案,实现了用户和权限点的分离,想对某个用户设置权限,只需要对该用户设置相应的角色即可,而该角色就拥有了对应的权限,这样一来,权限的分配和设计就做到了极简,高效,当想对用户收回权限时,只需要收回角色即可,比如不同的用户拥有不同的操作权限,确保只有经过身份验证的用户才能访问或操作受保护的资源。通过使用自定义指令,我们可以方便地实现权限控制功能。

Vue.directive指令(自定义指令)

三个参数

  • el : 指令所绑定的元素,可以用来直接操作DOM
  • binding: 一个对象,包含指令的很多信息
  • vnode: VUE编译生成的虚拟节点

生命周期 ( 钩子函数 )

  • bind 只调用一次,指令第一次绑定到元素时候调用,用这个钩子可以定义一个绑定时执行一次的初始化动作。

  • inserted:被绑定的元素插入父节点的时候调用(父节点存在即可调用,不必存在document中)

  • update: 被绑定与元素所在模板更新时调用,而且无论绑定值是否有变化,通过比较更新前后的绑定值,忽略不必要的模板更新

  • componentUpdate :被绑定的元素所在模板完成一次更新更新周期的时候调用

  • unbind: 只调用一次,指令元素解绑的时候调用


Vue.directive("hello",{
        bind:function(el,binding,vnode){
            el.style["color"] = binding.value;
            console.log("bind");
            console.log(el.parentNode);
        },
        inserted:function(){
            console.log("insert");
            console.log(el.parentNode);
        },
        update:function(){
            console.log("update");
        },
        componentUpdated:function(){
            console.log('componentUpdated');
        },
        unbind:function(){
            console.log('unbind');
        }
    })

注意

1、除 update 与 componentUpdated 钩子函数之外,每个钩子函数都含有 el、binding、vnode 这三个参数;

2、在每个函数中,第一个参数永远是 el, 表示被绑定了指令的那个 dom 元素,这个el 参数,是一个原生的 JS 对象, 所以 Vue 自定义指令可以用来直接和 DOM 打交道;

3、binding 是一个对象,它包含以下属性:name、value、oldValue、expression、arg、modifiers

4、oldVnode 只有在 update 与 componentUpdated 钩子中生效;

5、除了 el 之外,binding、vnode 属性都是只读的.

常见的权限颗粒度

Vue 自定义指令-按钮级权限实现

按钮权限–显示隐藏控制实现

1.在utils文件夹的directive.js文件中:

Vue.directive('permission', {
// 在元素被插入到 DOM 中时触发
  inserted (el, binding) {
    let userInfo = localStorage.getItem('userInfo')
    let btnPermission = JSON.parse(userInfo).buttons //本地存储中取后端返回权限数据
    console.log(btnPermission)
    if (binding.value) {
    // 如果不包含绑定值,则从父节点中移除该元素
      if (!btnPermission.includes(binding.value)) {
        el.parentNode.removeChild(el)  // 移除元素
      }
    }
  }
})

2.将directive.js引入到main.js中

Vue 自定义指令-按钮级权限实现

3.在html使用方式很简单,在指令中传入需要的值即可。

 <div class="bottom_btn">
        <el-button
          @click="handleAdd"
          v-permission="'1306_1'"
          style=" color:#fff; background-color:#1890FF; border: 1px solid #1890FF;"
          >新增
        </el-button>
        <el-button
        v-permission="'1306_2'"
          @click="handleDelete"
          style=" color:rgb(217,0,27); background-color:rgb(254,218,218); border: 1px solid rgb(217,0,27);"
          >删除
        </el-button>
      </div>

官方网址 : v2.cn.vuejs.org/v2/guide/cu…

原文链接:https://juejin.cn/post/7320169878644113408 作者:和沐橙

(0)
上一篇 2024年1月5日 下午5:03
下一篇 2024年1月5日 下午5:14

相关推荐

发表回复

登录后才能评论