Vue快速实现自定义指令鉴权

需求背景：页面中某些按钮或信息有权限才能看到

账号角色：Array

想法构思：首先缓存用户角色（Array）到Vuex，采用自定义指令传入有权限的角色数组，用户角色与有权限的角色对比，返回结果，展示或者删除节点。

import store from "@/store";
import { Message } from 'element-ui'

/**
 * 权限对比
 * @param {*} values 
 * @returns  
 */
function getAuth(values) {
  const userAuth = store.getters.auth
  if (!userAuth || !Array.isArray(userAuth)) return false
  let authority = false
  for (let i = 0; i < userAuth.length; i++) {
    if (values.includes(userAuth[i])) {
      authority = true
      break
    }
  }
  return authority
}

/**
 * 鉴权指令:需要传入有权限的角色数组
 */
export const has = {
  inserted(el, binding) {
    const { value } = binding;
    console.log(!value || !Array.isArray(value) || !value.length)
    if (!value || !Array.isArray(value) || !value.length) {
      Message({
        showClose: true,
        message: '请正确填写拥有权限的角色名称（Array）',
        type: 'error'
      })
    } else if (!getAuth(value)) {
      el.parentNode && el.parentNode.removeChild(el);
    }
  }
};


// main.js中注册指令
import { has } from '@/directive/index'
Vue.directive('has', has`)`

// 模板中使用指令
模板中使用指令：
<el-input  v-has="['admin']" v-model="formData.username"/>