v-auth

面向B端的商户中一般会根据当前用户去获取对应的权限码去控制页面和按钮的展示，在这里我们可以封装v-auth指令去实现多条件判断的按钮权限控制。（vue官方自定义指令） v-auth传入的权限码可以是String或者Array，此外还提供跟数组some和every方法一样的修饰符。

/**
 * auth指令 v-auth="Array or String"
 * 传入的权限码可以是数组或者是字符串
 * 此外还有两个修饰符 some 和 every
 * v-auth.some="Array" 表示满足其中一个资源即可（不设置修饰符情况下默认为some）
 * v-auth.every= "Array" 表示列表的所资源必须存在
 * 调用实例：
 *  <span v-auth.some="['admin1', 'admin2']"></span>
 *  <span v-auth.every="['admin1', 'admin2']"></span>
 *  <span v-auth="'admin1'"></span>
 */

// 删除节点dom
const remove = (el) => el.parentNode.removeChild(el)

Vue.directive('auth', {
  inserted: (el, binding, vNode) => {    
    const { $root: vm } = vNode.context
    // 获取当前用户拥有的权限列表（根据自身业务获取）
    const { access } = vm.$store.state.user
    // 获取传入的权限码value（string or array）和修饰符modifiers
    let { value, modifiers } = binding

    // 判断条件：当传入的值不是数组或者字符串时，直接隐藏元素
    if (
      !(
        typeof value === 'string' ||
        value instanceof Array
      ) ||
      !value
    ) {
      remove(el)
      return console.error('please set the value to a string or array.')
    }
    
    // 判断条件：如果传入的权限码是string则转化成数组
    if (typeof value === 'string') {
      value = [value]
    }

    /**
     * 判断条件
     *  -修饰符为 every时 value数组只要有一个元素不存在access权限集内，隐藏元素
     *  -修饰符为 some或者没有时，value数组所有元素都不存在access权限集内，隐藏元素
     */ 
    if (
      (
        modifiers.every &&
        value.some(v => !access.includes(v))
      ) ||
      (
        !modifiers.every &&
        value.every(v => !access.includes(v))
      )
    ) {
      remove(el)
    }
  }
}

看到这里是不是觉得很简单，只需要一个简单的指令就能实现按钮权限的多条件判断，满足你各种场景状态下的权限需求。

实际项目中使用如下

<el-button type="primary" round @click="getList(true, false)" v-auth.every="['意见反馈', '查询']">查询</el-button>