一、获取所有按钮的权限

1. 将按钮权限数据存放在数据里resourcesData 

2.存入sessionStorage.setItem('resourcesData', this.resourcesList);

二、封装

创建directive文件夹创建index.js 和permissions.js

1.permissions.js

检测是否有权限

使用Vue.directive声明自定义指令permiss

export default {

   inserted(el,binding){

    let buttonKey = binding.value;

    // 代表某个元素需要通过权限验证

    if(buttonKey){

        let key = checkKey(buttonKey)

        if(!key){//没有权限

            el.remove()  //删除按钮

        }

    }else{

        throw new Error('缺少唯一指令')

    }

},

}

先定义检测函数

function checkKey(key) {

  // 获取权限数组

  let permissionData = sessionStorage.getItem("resourcesData") ? sessionStorage.getItem("resourcesData") : [] ;

  //如果传入的元素key不在权限数组里，则不可显示

  let index = permissionData.indexOf(key)

  if(index > -1) {

      return true;

  }else{

      return false;

  }

}

2.index.js 自定义指令全局注册入口文件

import Vue from "vue";

import buttonPermissions from "./permissions"

// 注册全局指令

Vue.directive("permiss", buttonPermissions);

三：使用方式：

1.全局挂载main.js  

注册全局 directive 指令 import "./directive/index";

2.页面应用

 <el-button type="text" v-permiss="'project-query:del'>

              >