一、获取所有按钮的权限
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'>
>
