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

最新推荐文章于 2024-05-14 17:48:03 发布

落落叶叶无声

最新推荐文章于 2024-05-14 17:48:03 发布

阅读量3.4k

点赞数 2

分类专栏： Vue.js 文章标签： vue v-has 权限

本文链接：https://blog.csdn.net/u012557814/article/details/122659042

版权

Vue.js 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

前言

如何实现权限控制？很多前端同学第一时间会想到实现自定义指令 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 直白明显。

后记

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

落落叶叶无声

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
为什么我不推荐 v-has 实现权限控制？

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

扫一扫

专栏目录