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

最新推荐文章于 2025-05-15 22:37:21 发布

Technology_hands

最新推荐文章于 2025-05-15 22:37:21 发布

阅读量706

点赞数 3

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/Technology_hands/article/details/140253259

版权

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>

显示