vue权限permission实现

1.src下新建directives文件夹新建index.js文件

import Vue from 'vue'

/**
 * 权限指令
 *
 * 调用方式，在需要检验权限的按钮上添加 `v-permission:name`，`name` 是指对应页面该按钮的操作 Id
 */
Vue.directive('permission', {
  inserted: checkPermission,
})

function checkPermission(el, binding) {
  const { value } = binding
  const has = hasPermission(value)
  if (!has) {
    el.parentNode && el.parentNode.removeChild(el)
  }
}

/**
 * 是否拥有相应的权限
 * @param {string | string[]} permission 权限代码
 */
function hasPermission(permission) {
  const permissionList = ['add', 'edit', 'audit', 'del', 'invalid']
  return permissionList.some(item => item === permission)
}

2.main.js引入

import './directives'

3.页面使用

<el-button
      v-permission="'add'"
      size="medium"
      type="primary" 
      @click.native.prevent="add">
      添 加
    </el-button>