Vue.js 不创建组件的自定义指令

我有一个自定义指令，用于检查是否显示某些组件的用户角色

Vue.directive("permission", {
bind(el, binding) {
  Vue.nextTick(() => {
     el.vFillMarkerNode = document.createComment('');
     el.parentNode.insertBefore(el.vFillMarkerNode, el.nextSibling);
     if (Auth.canSee(binding.value)) {
      el.textContent = binding.value;
    } else {
      el.parentNode.removeChild(el);
    }
  });
},

这将起作用，但在未显示的组件中，它将从api（在组件创建的钩子上）获取数据，即使用户没有权限

<mycomp v-permission="['Admin']"></mycomp>

---

有没有办法告诉vue，如果我的指令条件不符合，请不要触发相关组件的“已创建”挂钩，因此不要从api获取数据？

我认为这不是正确的方法来执行您尝试执行的操作。因为您需要依赖组件上的根元素来执行检查。在组件已安装后，您正在进行检查。因此，

Vue.nexTick（）

有两种方法可以解决这个问题

在

Vuex存储中运行逻辑

，并在父组件中使用

mapGetters

，以获取所有组件中的权限

将权限绑定到根元素，并对组件执行

v-if=“$root.permissions.includes（'admin'）”