Javascript 在Vue.js中创建自定义条件渲染指令

我正在尝试解决如何生成自定义Vue条件指令。我知道我可以编写一个全局方法并在v-if中调用它，但为了代码清晰，我希望有一个自定义指令

其目的是用指令修饰元素并向其传递Guid（这完全是为了根据用户权限处理条件重写）：

v-permission=“'4ECE1FD4-4019-4CA2-AB9E-0A555CCBDB5B'”

目前，我只是将

display:none

添加到指令的

bind

方法中的元素中，这对于隐藏内容很好，但如果从未呈现元素，性能会更好

有什么办法可以做到这一点吗

目前的指令代码如下：

---

我不确定是否有可能实现你想要的。但我也不确定这是否真的有必要。我认为像这样的建筑

<tag v-if="getPerm('4ECE1FD4-4019-4CA2-AB9E-0A555CCBDB5B')">
  ...
</tag>

...

---

。。。确实足够声明性。

好吧，可以使用插入的

钩子：

inserted
：将绑定元素插入其父节点时调用

示例代码剪报：

Vue.directive('permission', {
  inserted: function (el, binding, vnode) {
    if (binding.value) {
      let hasPermission = 
vnode.context.$store.getters.hasApiPermission(binding.value)
      if (!hasPermission) {
        el.parentNode.removeChild(el)
      }
    } else {
      console.error('You must specify a permission ID')
    }
  }
})

但是，使用内置的
v-if
指令要好得多。由于Vue 2基于虚拟DOM，因此如果语句返回
false
，它将永远不会呈现。在这种自定义指令情况下，它将首先呈现，然后删除。
我建议不要对客户端做出权限决定。环境太不安全了。使黑客更容易收集有关您的站点的信息（以及公开控制权限的GUID）。@PatrickSteele没有对客户端做出任何决定，这只是为了隐藏UI中不必要的部分。所有权限都使用GUI，API调用都是使用签名JWT进行的，因此即使有人对所有使用的GUI进行了反向工程，也无法使用这些信息。我也更喜欢这种方法，因为它允许在不同的上下文中使用权限逻辑，并非常容易地将其与其他逻辑结合起来：例如，您需要显示一个元素，以防用户导航到该选项卡并具有执行此操作的权限。我想不可能在同一个元素上使用两个结构指令
Vue.directive('permission', {
  inserted: function (el, binding, vnode) {
    if (binding.value) {
      let hasPermission = 
vnode.context.$store.getters.hasApiPermission(binding.value)
      if (!hasPermission) {
        el.parentNode.removeChild(el)
      }
    } else {
      console.error('You must specify a permission ID')
    }
  }
})