vue3 按钮权限最新写法使用指令写法控制

1.在utils创建一个文件夹directive,里面创建一个index.ts和一个authList.ts

2.在utils/directive/authList.ts写入

// 从Pinia中取 到一个字符串数组 ['sys:menu:add','sys:menu:edit']
// 然后用v-auth指令里面传过来的值进行比对,如果满足的话就不变,不满住就移除这个按钮
// v-auth 
// v-auths  


// 导出一个函数
export function auth(app) {
    // app是 main.ts的那个app,会传进来
    app.directive('auth', {
        mounted(el, binding) {
            // 这里逻辑简化了,各位请求Userinfo后将权限存进pinia,然后这里取Pinia给buttonList就可以了
            const buttonList = ['sys:menu:add', 'sys:menu:edit']
            // 如果 指令传进来的值有一个相等,那么就不删除该节点,注意这里有个取反,所以直接写进if
            if (!buttonList.some(btn => btn === binding.value)) {
                el.parentNode.removeChild(el);
            }
        }
    })
}


export function auths(app) {
    app.directive('auths', {
        mounted(el, binding) {
            const buttonList = ['sys:menu:add', 'sys:menu:edit']
            if (!buttonList.some(btn => binding.value.indexOf(btn) !== -1)) {
                el.parentNode.removeChild(el);
            }
        }
    })
}

3.在utils/directive/index.ts写入

import { auth, auths } from "./authList.ts";
//这样是让main.ts的逻辑不再改动,所有的directive都在这里统一收集
export function useDirective(app) {
  auth(app);
  auths(app);
}

4.在main.ts写入

import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
import { useDirective }from '@/utils/directive/index.js'
useDirective(app)


app.mount('#app')

5.在vue中使用

<template>
  <div>
    <div v-auth="'sys:menu:edit'">我是edit权限就可以显示</div>
    <div v-auth="'sys:menu:add'">我是add权限就可以显示</div>
    <div v-auth="'sys:menu:not'">我是not权限就可以显示</div>
    <div v-auths="['sys:menu:not','sys:menu:add']">我是not和delete权限其中一个有就可以显示</div>
    <div v-auths="['sys:menu:not','sys:menu:not2']">我是not和not2权限其中一个有就可以显示</div>
  </div>
</template>

显示

我是edit权限就可以显示

我是add权限就可以显示

我是not和delete权限其中一个有就可以显示

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值