Question

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

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获取数据？

Answer 1

我认为这不是正确的方法来做您想做的事情。因为您要依赖组件的根元素才能进行检查。您已经在组件安装后进行检查。因此是Vue.nexTick()。

有两种方法可以解决此问题。

在Vuex Store中运行逻辑，并在父组件中使用mapGetters以获取所有组件中的权限。
绑定您对根元素的权限，并对组件执行v-if="$root.permissions.includes('admin')"

未创建组件的自定义指令

1 个答案: