当前位置：网站首页 > 技术文章 > 正文

如何根据权限进行按钮级别控制「Vue小知识」

zhezhongyun 2025-05-08 08:08 29 浏览

大家好，我是哈默。

这篇文章我们讲一下如何根据权限进行按钮级别控制。

权限从哪里来？

首先，我们这里会把权限直接放在 localStorage 中，如下：

可以看到，当前用户拥有创建、编辑 2 个权限。

我们要拿权限做什么？

首先，页面上我们有 3 个按钮，如下：

默认情况下，所有用户都可以看到这 3 个按钮。但是，我们期望的是，根据用户的权限，控制对应按钮的显示和隐藏。这个显示隐藏的逻辑，我们可以用 v-if 去实现，但是考虑到复用性，我们可以定义自定义指令来封装我们的逻辑。

定义自定义指令

首先，一个指令就是一个对象，里面可以包含若干个钩子函数，这里我们可以选择 bind 钩子。

bind 钩子的执行实际是指令绑定到目标元素的时候，比如：

指令的注册方法如下：

bind 钩子中的参数

bind 钩子会接收 2 个参数，el 和 bindings，我们对它们进行打印，如下：

在控制台里，我们可以看到，el 指的是指令绑定的元素，bindings 则是指令相关的信息，如下：

并且，我们可以通过 bindings.value 获取指令的值，例如这里的 hello：

那么，现在我们就可以给每个按钮定义不同的值，代表每个按钮的权限：

定义指令内部控制显隐的逻辑

我们的思路是：

首先，获取当前用户的权限 permissions。

然后通过 bindings.value，得到当前按钮需要的权限 needPermission。

判断 permissions 里是否包含 needPermission，并把结果保存在变量 hasPermission 中。

如果用户没有某个按钮的权限，那么我们就隐藏当前按钮。

实现如下：

完全移除没有权限的按钮的 DOM 元素

现在，我们还可以通过手动修改 display 属性，将按钮调出来。

所以，我们需要完全删除按钮的 DOM 元素。

在使用 removeChild 删除的时候，我们必须加上 setTimeout。

因为，在指令的 bind 钩子函数执行的时候，按钮的 DOM 元素其实并没有渲染出来，所以还操作不了 DOM，我们通过 setTimeout 设置一个宏任务，让 setTimeout 里面的代码再按钮的 DOM 元素渲染出来以后再执行，这个时候就可以操作 DOM 了。

总结

我们通过封装自定义指令实现了控制按钮显示隐藏的效果，那么在其他地方我们需要实现相同效果时，只需要像 v-if 一样，给具体的值就 OK 了。

HTML button value 属性

上一篇：企业级——容器反向代理利器之traefik
下一篇：面试:如何保证接口的幂等性?常见的实现方案有哪些?

如何根据权限进行按钮级别控制「Vue小知识」

权限从哪里来？

我们要拿权限做什么？

定义自定义指令

bind 钩子中的参数

定义指令内部控制显隐的逻辑

完全移除没有权限的按钮的 DOM 元素

总结

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

接口测试遇到500报错?别慌，你的头部可能有点问题

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?

关于HTML5被简称做H5，你怎么看?（html5缩写）