Vue自定义权限指令v-auth实现按钮权限控制

  • Post author:
  • Post category:vue


面向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']"