Vue权限埋点处理

1、创建hasPermission，创建自定义指令

/**
 * 这里是自定义的权限数据，可删除
 */
let per = [
  {
    action: "user:edit",
    describe: "测试权限",
    status: 1,
    type: 1,
  }
]

sessionStorage.setItem('USER_AUTH', JSON.stringify(per))

/******* end ************/


const hasPermission = {
    install (Vue) {
          // 单权限判断
          Vue.directive('has', {
            inserted: (el, binding, vnode)=>{
                //节点权限处理，如果命中则不进行全局权限处理
                filterGlobalPermission(el, binding, vnode);
            }
          });
    }
};

/**
 * 全局权限控制 (无权限移除dom元素)
 */
export function filterGlobalPermission(el, binding, vnode) {
  // 拿到全部权限
  let permissionList = [];
  // 拿到登录后接口返回的权限列表
  let authList = JSON.parse(sessionStorage.getItem('USER_AUTH') || "[]");
  // 处理获取到权限的数据 (看自己接口返回的有效值之类，这里我为type不为2才生效，2是菜单权限)
  for (let auth of authList) {
    if(auth.type != '2') {
      permissionList.push(auth);
    }
  }

  // 如果没有按钮权限，移除dom元素
  if (permissionList === null || permissionList === "" || permissionList === undefined|| permissionList.length <= 0 ) {
    el.parentNode.removeChild(el);
    return;
  }
  
  // 直接拿到权限的标识作为一维数组 （这里type是指类型，2是菜单权限，可按自己项目更改）
  let permissions = [];
  for (let item of permissionList) {
    if(item.type != '2'){
      permissions.push(item.action);
    }
  }
  // 如果在权限列表中找不到当前指令绑定的权限标识，则移除dom元素
  if (!permissions.includes(binding.value)) {
    el.parentNode.removeChild(el);
  }
}

export default hasPermission;

2、 全局注册权限埋点自定义指令

在main.js注册全局指令

import Vue from 'vue'
import hasPermission from '@/utils/hasPermission'

// 权限埋点
Vue.use(hasPermission)

3、实战使用

<button v-has="'user:edit'">权限埋点</button>

4、main.js全局注册vue方法权限判断 （非权限埋点）

// 针对项目改写编辑权限
Vue.prototype.$isDisabledAuthNew = function (code) {
  const user_auth = sessionStorage.getItem('USER_AUTH')
  if (user_auth) {
    const a = JSON.parse(user_auth)
    const b = a.find(v => v.action === code)
    return !b
  } else {
    return true
  }
}

<button v-if="!$isDisabledAuthNew('user:edit')">权限埋点</button>