vue如何实现角色权限的控制

import { isObjectLike } from "lodash-es";
import { btnPermRemove, btnPermControl } from "globalSettings";

export default {
  install(Vue) {
    Vue.directive("perm-code", {
      async bind(el, binding, vnode) {
        // 开发模式下是否关闭按钮级别权限控制
        if (!btnPermControl) return;

        let { value: permCode } = binding;  // 获取按钮的权限码
        if (!permCode) return false;  // 如果没有权限码则退出

        const dom = el;
        const _store = vnode.context.$store;
        let pathnameCurrent = vnode.context.$route.path;
        if (!pathnameCurrent) pathnameCurrent = location.pathname;
        const pathnameStore = _store.state.router.pathname;

        // 动态获取权限码
        if (isObjectLike(permCode)) {
          permCode = Vue.filter(permCode.filter)(permCode.value);
        }

        // 是否显示无权限的按钮但禁用
        const permShow = el.getAttribute("perm-show") === "true";

        // 从store获取权限码列表
        if (pathnameCurrent && pathnameStore !== pathnameCurrent) {
          await _store.dispatch("router/getCurrentPermList", pathnameCurrent);
        }

        const permCodeList = _store.getters["router/permCodeList"];

        // 根据权限控制按钮的显示和状态
        dom.setAttribute("perm-code", permCode);
        if (permCodeList.includes(permCode)) {
          dom.style.display = "inline-block";
          dom.title = `有权限按钮: ${permCode}`;
        } else if (permShow) {
          dom.style.display = "inline-block";
          dom.setAttribute("disabled", "disabled");
        } else {
          dom.title = `无权限按钮: ${permCode}`;
          if (btnPermRemove) {
            setTimeout(() => {
              dom.parentNode.removeChild(el);  // 移除无权限按钮
            }, 0);
          } else {
            dom.style.display = "inline-block";
          }
        }
      },
    });
  },
};

data() {
  return {
    buttonList: [
      {
        label: "新增",
        type: "add",
        click: this.openAdd,
        btnPermCode: "add",  // 权限码
      },
      {
        label: "删除",
        type: "delete",
        click: this.clickDelete,
        btnPermCode: "delete",  // 权限码
      },
      {
        label: "发布",
        type: "publish",
        click: this.clickPublish,
        btnPermCode: "publish",  // 权限码
      },
      // 更多按钮...
    ],
  };
},

const permCodeList = _store.getters["router/permCodeList"];