为什么我不推荐 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 是没有权限的啊。为什么我不推荐 v-has 实现权限控制?_第1张图片
到这里其实我们可以看出上面方法的问题了。

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 直白明显。

后记

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

你可能感兴趣的:(Vue.js,vue,v-has,权限)