Vue 通过自定义指令实现前端按钮权限功能

本文介绍了如何在后台管理项目中通过自定义指令实现按钮权限功能,避免了繁琐的v-if遍历,提高代码复用性和安全性。通过登录后获取用户权限,对比指令中的按钮,不在权限内的按钮将被隐藏。
摘要由CSDN通过智能技术生成

一、什么是按钮权限功能

在许多后台管理的项目中,不同类型的用户(如普通用户、管理员等)可能具有不同的权限。通过前端按钮权限功能,你可以根据用户的角色或权限级别动态显示或隐藏某些按钮或操作,从而确保用户只能访问其具有权限的功能,从而增强项目的安全性和用户体验。

二、如何实现

目前我知道的两种解决方案:

1、拿到仓库用来存放按钮权限的数组,配合v-if去实现(太繁琐)

2、使用自定义指令实现(推荐)      

第一种方法是通过仓库拿到按钮的数据,在页面里配合 v-if 去实现按钮的显示与隐藏,这里就会出现一个问题,如果多个页面都需要进行按钮的权限判断,那么每个页面都需要去获取用户权限的数组与当前按钮进行比较判断,所以很繁琐。不是说这种方法不能用,而是我不太推荐这样用。所以下面重点来讲第二种方法(自定义指令

(一)思路:

登录完以后通过token获取用户对应的button(按钮权限),通过自定义指令,判断当前按钮的权限是否在用户对应的button数组里,若不在即删除该按钮DOM。

(二)代码实现:

main.ts 文件

// main.ts 文件
// 引入自定义指令文件
import {isDirBtn} from '@/directive/has'
const app = createApp(App)
isDirBtn(app)

has.ts 文件

// has.ts 文件
// 引入仓库
import pinia from '@/store'
import useUserStore from '@/store/modules/user'
let userStore = useUserStore(pinia)
/**
 * 此方法用于全局注册自定义指令,通过在 main.ts 文件中调用此函数,把 app 实例传入,然后在此方法中进行全局注册
 * @param app 
 */
export function isDirBtn(app:any){
    app.directive('isDirBtn', {
        mounted(el:any,binging:{value:string}) {
            /**
             * el:指令绑定到的元素。这可以用于直接操作 DOM.
             * binging:一个对象,包含以下属性
             *    value:传递给指令的值。例如在 v-my-directive="1 + 1" 中,值是 2。
             */
            // 判断如果当前按钮不在按钮权限的数组中,就删除当前按钮
            if(!userStore.button.includes(binging.value)){
                el.parentNode.removeChild(el)
            }
        },
    })    
}

页面.vue 文件

// index.vue 文件 
<el-button type="danger" @click="deleteSomeRole" v-isDirBtn="`base:sys:role:add`" > 删除 </el-button>

这样写的话,其他页面需要进行按钮的权限判断的话,只需在权限按钮加入该指令即可。

具体每个人的代码不一样,情况也不一样,所以主要看一个思路,实现按钮权限的一个思路就是这样的。如果有什么问题,或者你有什么其他的好的想法,可以在评论区讨论讨论

  • 9
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

M_emory_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值