vue 权限按钮显示隐藏 (自定义指令法)

咱们做后台管理系统 肯定避免不了 权限菜单 权限按钮的显示与隐藏  我分享一下 我的实现:

import Vue from 'vue'

Vue.directive('auth', {
  inserted: function (el, binding, vnode) {
    const authItem = binding.value.authItem
    const authArr = [...new Set(binding.value.authArr)]
    if (Object.prototype.toString.call(authItem) === '[object Array]') {
      // 数组
      if (JSON.stringify(authItem.sort()) === JSON.stringify(authArr.sort())) {
        //存在不做操作
      } else {
        //不存在
        el.parentNode.removeChild(el)
      }
    } else {
      //字符串
      if (authArr.indexOf(authItem) < 0) {
        el.parentNode.removeChild(el)
      }
    }
  },
})

这里创建了一个 js 文件  具体逻辑如上

在 main.js 中引入

 使用

 这里传了两个参数 

authItem 是当前按钮的权限标记 可以传 字符串/数组 

authArr 是当前页的权限标记数组

 这里我是通过当前router获取的 你们也可以通过 vuex pinia 等状态管理工具 获取你们后台返回的路由数组中的meta 中的权限标记数组 具体根据项目而定 请自行修改

传的这两个参数 就是比较

authItem如果为字符串 authArr中存在这个字符串 就显示 

authItem如果为数组 authArr中的数组内容和authItem的数组内容 一样就显示

嗯....  我是这样做的 有大佬有更好的方法 欢迎评论 哈哈哈