关于vue3 按钮权限的控制，使用自定义指令来实现

最新推荐文章于 2025-04-22 01:19:50 发布

最新推荐文章于 2025-04-22 01:19:50 发布

阅读量966

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/Vue1024/article/details/131954477

文章介绍了如何在Vue3中通过创建自定义指令来实现按钮的权限控制，具体做法是根据登录时获取的用户权限标识，动态决定是否显示或移除按钮。如果用户无特定权限，对应的按钮将被隐藏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于vue3 按钮权限的控制，使用自定义指令来实现

需求

根据不同的权限展示或者隐藏按钮

实现

使用自定义指令来控制按钮，当有权限时就显示，没有就移除元素

代码

src/directives/components/button-permission.ts
components文件下可以创建多个自定义指令，根据直接需求来创建使用

登录成功时获取后端返回的权限标识，保存到内存中或者状态管理器中 vuex | pinia

const directives = {
	// el 指定绑定元素的dom binding.value传递给指令的值
	mounted(el:HTMLElement, binding: { value: any }) {
		// value 获取用户使用自定义指令绑定的内容
		const { value } = binding

		// 从登录的时候获取到的该用户的permission 是个数组
		const permissionArray = JSON.parse(localStorage.getItem('permissions')!)
		if(permissionArray[0] === '*:*:*') return// 超级管理员

		// 判断用户使用自定义指令，是否使用正确了
		if (value) {
			const permissionFlag = value
			//判断传递进来的按钮权限，用户是否拥有
			//Array.some(), 数组中有一个结果是true返回true，剩下的元素不会再检测
			const hasPermission = permissionArray.some((role: any) => {
				return permissionFlag === role
			})
			// console.log(hasPermission)
			// 当用户没有这个按钮权限时，隐藏这个按钮
				if (!hasPermission) {
					el.parentNode && el.parentNode.removeChild(el);
			}
		} else {
			// el.style.display = 'none'
			// console.log('没有权限')
		}
	}
}
export default {
	name: "permission",
	directives
}

src/directives/index.ts

import type { App } from 'vue'
import buttonPermission from './components/button-permission'
export default function installDirective(app: App) {
    app.directive(buttonPermission.name, buttonPermission.directives)
}

main.ts

// 自定义指令的全局注册
import directives from '@/directives'
// 自定义指令的全局注册
app.use(directives)

最后给你想要控制按钮的那个元素标签上加上v-permission 值是后端给定的权限标识类似 xxx:xxx:xxx

<div class="item bluecolor" v-permission="xxx:xxx:xxx">确定</div>