自定义指令权限控制

1. 权限控制文件 hasPermission.js

/**
 * 自定义指令
 */
const hasPermission = {
   install (Vue, options) {
     // 创建指令
     Vue.directive('has', {
        inserted: (el, binding, vnode)=>{
          // 指令执行方法
          filterPermission(el, binding);
        }
     });
  }
};
/**
 * 全局权限控制
 */
export function filterPermission(el, binding) {
  // 定义数组存储有效的数据
  var permissionList = [];
  // 数据库数据的筛查
  let authList = JSON.parse(localStorage.getItem(USER_AUTH) || "[]");
  for (var auth of authList) {
    if(auth.type != '2') {
      permissionList.push(auth);
    }
  }
// 筛查是否有有效值
if (permissionList === null || permissionList === "" || permissionList === undefined||permissionList.length<=0) {
    // 没有筛到停止后续操作
    el.parentNode.removeChild(el); 
    return;
  }

  // 如果有筛查到定义空数据存储数据
  let permissions = [];

  // 继续判断数组中有效的数据（1为有效数据，2为无效的数据）
  for (var item of permissionList) {
    if(item.type != '2'){
      permissions.push(item.action);
    }
  }

 /**
  * 处理有效的数据是否有权限 
  * 没权限的话删除子节点
  * 注意：删除子节点，被删除的此节点需要有父元素
 */
  if (!permissions.includes(binding.value)) {
    el.parentNode.removeChild(el);
  }
}
export default hasPermission;

2. main.js 中方法全局设置

/**
 * 引入hasPermission.js文件
*/
import hasPermission from '@/utils/hasPermission'

Vue.use(hasPermission)

3. 页面使用

/**
 * 页面使用给按钮包一层span父元素
 * 如果接口获取的数据有edit
 * v-has 控制按钮权限即可实现
*/
<span v-has="'edit'">
    <a @click="">编辑</a>
</span>