vue实现前端按钮组件权限管理

<el-button
  v-hasPermi="['home:advertising:update']"
>新建</el-button>

/**
 * 权限处理
 */
​
export default {
  inserted(el, binding, vnode) {
    const { value } = binding;
    const SuperPermission = "superAdmin"; // 超级用户，用于开发和测试
    const permissions = localStorage.getItem('userPermissions')&& localStorage.getItem('userPermissions').split(',');
    // 判断传入的组件权限是否符合要求
    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value;
      const hasPermissions = permissions && permissions.some(permission => all_permission === permission || permissionFlag.includes(permission));
      // 判断是否有权限是否要展示
      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el);
      }
    } else {
      throw new Error(`请设置操作权限标签值`);
    }
  },
};

import Vue from 'vue';
import Vpermission from "./permission";
// 按钮权限 自定义指令
Vue.directive('permission', Vpermission);

const router = [{
  path: 'needPermissionPage',
  name: 'NeedPermissionPage',
  meta: {
    role: ['permissionA', 'permissionB'],
  },
}]

const UPDATE = 0b000001;
const DELETE = 0b000010;
const ADD = 0b000100;
const SEARCH = 0b001000;

const reslut = UPDATE | DELETE | SEARCH;
console.log(reslut);  // 11

const reslut = UPDATE | DELETE | SEARCH;
console.log(reslut.toString(2));  // 1011

console.log((reslut & DELETE) === DELETE);  // true

console.log((result & ADD) === ADD); // false

/**
 * 接受该组件所需的权限，返回用户权限列表是否有该权限
 * @param {String} permission 
 * @returns {Boolean}
 */
function hasPermission(permission) {
  const permissionList = {
    UPDATE: 0b000001,
    DELETE: 0b000010,
    CREATE: 0b000100,
    SEARCH: 0b001000
  }
  let btnPermission = permissionList[permission] ? permissionList[permission] : -1;
  if (btnPermission === -1) return false;
  const userPermission = localStorage.getItem('userPermissions');
  // 将本地十进制的值转换为二进制
  const userPermissionBinary = userPermission.toString(2);
  // 对比组件所需权限和本地存储的权限
  return (userPermissionBinary & btnPermission) === btnPermission;
}

<el-button v-show="hasPermission('UPDATE')">更新</el-button>