根据权限进行按钮级别控制

1、首先我们可以将权限存储在localstory里面，便于存取，其次自定义指令，在页面中引入使用

2、可以创建一个directive的文件夹，在has.js的文件里面写指令对象及其函数操作，再将这个文件引入到使用的vue文件中，定义directives。

index.vue

<template>
  <div>
    <h3>根据权限进行按钮级别控制</h3>
    <el-button v-has="'add'">新增</el-button>
    <el-button v-has="'del'">删除</el-button>
    <el-button v-has="'search'">查询</el-button>
  </div>
</template>
​
<script>
import hasDirective from '@/utils/directives/has'
export default {
  directives: {
    has: hasDirective
  },
  created () {
    const directive = ['add', 'del']
    localStorage.setItem('directive', directive)
  }
}
</script>
​
<style>
</style>

directives/has.js

export default {
  bind (el, bind) {
    // el获取到当前按钮的dom，bind获取的是包含的名称，值等一些属性，bind.value就是当前按钮需要的权限
    const needPermission = bind.value // 当前按钮需要的权限
    const hasPermission = localStorage // 当前含有的权限
      .getItem('directive')
    const isPermission = hasPermission.includes(needPermission)
    if (!isPermission) {
      // 没有权限就隐藏按钮，但是这个dom其实还是存在的
      el.style.display = 'none'
      setTimeout(() => {
        // 为了防止出现错误，直接在父节点中找到然后删除整个el,需要注意的是，由于删除的时候，el节点还没有创建好，所以就将其放在一个宏任务中，生成后执行删除
        el.parentNode.removeChild(el)
      }, 0)
    }
  }
}
​