通过vue自定义指令实现按钮级别权限

原先项目的实现按钮的权限是通过在获取角色信息的时候在storage中存储、角色权限字段，使用起来比较麻烦，需要在每个页面中引入storage，而通过全局注册自定义指令就可以方便的解决这个问题

// 在utils中建立permission.js文件
import Vue from 'vue'
/**权限指令**/
export const Has = Vue.directive('has', {
  inserted: function (el, binding, vnode) {
      // 获取页面按钮权限
      let btnPermissionsArr = [];
      if (binding.value) { 
          // 如果指令传值，获取指令参数，根据指令参数和当前登录人按钮权限做比较。
          console.log(binding.value, 'binding.value')
          btnPermissionsArr = Array.of(binding.value);
      } else {
          // 否则获取路由中的参数，根据路由的btnPermissionsArr和当前登录人按钮权限做比较(当前路由尚未添加权限字段)。
          // btnPermissionsArr = vnode.context.$route.meta.btnPermissions;
      }
      if (!Vue.prototype.$_has(btnPermissionsArr)) {
        console.log(el, 'el')
        el.parentNode.removeChild(el)
      }
  }
})
// 权限检查方法
Vue.prototype.$_has = function (value) {
  let isExist = false;
  // 获取用户按钮权限
  let btnPermissionsStr = sessionStorage.getItem("staffshow");
  if (!btnPermissionsStr) {
    return false;
  }
  if (value.indexOf(btnPermissionsStr) > -1) {
    isExist = true;
  }
  return isExist;
}

在main.js引入该文件

import Has from '@/utils/permission'
new Vue({
  el: '#app',
  Has,
  render: h => h(App)
})

模板文件中使用

<span class="optionbtn" v-has="'admin, engineer'" @click="updateInfo">更新</span>