为什么我不推荐 v-has 实现权限控制？

前言

如何实现权限控制？很多前端同学第一时间会想到实现自定义指令 v-has 或 v-permission。代码大致如下：

Vue.directive("has", {inserted: function(el, binding) {if (!Vue.prototype.$has(binding.value)) {el.parentNode.removeChild(el);}},
});

习惯了这种写法的同学可能觉得并没什么问题，因为已经能“完美” 实现功能。但是细思实现方式，Vue 其实已经帮我们创建了权限元素，只是我们自己再去删而已。

自定义指令的 inserted

Vue 通过虚拟 Dom 创建元素后，会进行绑定指令阶段，回调 bind 时，元素并未 append 到文档中，这就是我们不能再 bind 函数删除 el 的原因。

在调用 inserted 之前，Vue 会将已绑定指令的元素 append 到父元素，整个文档再 append 到 body 时，我们才得以使用 el.parentNode.removeChild(el)。

请看下面的例子。

断点放在inserted ，我们确实看到了提交按钮，但是这个人 Damon 是没有权限的啊。
到这里其实我们可以看出上面方法的问题了。

Vue 创建权限元素 => 插入文档 => Inserted 删除权限元素.

既然是权限控制，我们为什么还要先生成这个权限按钮，然后再删掉呢？

实例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>权限控制</title>
</head>
<body><script crossorigin="anonymous" src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script><div id="app"><button v-has="'Damon'">提交按钮</button><p>我是 Damon 我没有权限，但是你看到提交按钮了吗？</p></div><script>let permissionList = ['Tom', 'Ross']Vue.directive('has', {bind(el, binding) {let includes = permissionList.includes(binding.value)},inserted(el, binding) {let has = permissionList.includes(binding.value)if (!has) {el.parentNode.removeChild(el);}}})const app = new Vue({})app.$mount('#app')console.log(app)</script>
</body>
</html>

干脆的 v-if

既然自定义的 v-has 会帮我们生成元素，我们可以使用 v-if 代替，把元素的创建扼杀在编译阶段，因为只要 v-if 指令的值为 false，Vue 就不会帮我们创建它。

比如上面的提交按钮：

<button v-if="$has('Damon')">提交按钮</button>

Vue 原型中添加 $has

Vue.prototype.$has = function(text) {return [permissionList].includes(text)
}

结论

在权限控制中，我们需要根据不同用户角色或等级显示或屏蔽权限元素，比如按钮或视图。

我个人认为，在前端做控制，不应该有生成权限元素的过程，但是自定义指令会有创建权限元素的过程，并且我们需要写代码删除它，这无疑是多余的过程。

使用 v-if 可以很好地帮我们解决这个问题。虽然 v-if 很好，但是它也有个不足的地方，在标签的语义上并没有 v-has 直白明显。

后记

如果你有更好的方法，请与我们分享。以上仅为本人对权限控制的实践和思考，在复杂的业务场景不一定适用，如有不当欢迎指正。