Vue按钮权限的实现示例

<div class="container">
    <button>admin权限按钮</button>
</div>

<div class="container">
    <button v-permission="['admin', 'apadmin']">admin权限按钮</button>
</div>

<script setup>
const vPermission = (el, binding) => {
    // 获取角色数组
    const roles = binding.value;
    if (!roles.includes('admin')) {
        el.remove();
    }
}
<script>

<div class="container">
    <button v-if="!isPermission()">admin权限按钮</button>
</div>

<script setup>
// 1. 这里模拟后台返回的角色权限列表
const roles = ['admin', 'apadmin'];

const isPermission = () => {
    let flag = false;
    if (!roles.includes('admin')) {
        flag = true;
    }
    return flag;
}

// PermComp.js 
import { getCurrentInstance } from 'vue';

export default ({ roles }) => {
    // 1. 获取组件实例
    const instance = getCurrentInstance();
    if (roles.includes('admin')) {
        // 2. 渲染插槽内容
        return instance.slots && instance.slots.default();
    }
}

<template>
    <div class="container">
        <PermComp :roles="roles">
            <button>admin权限按钮</button>
        </PermComp>
    </div>
</template>
<script setup>
import PermComp from './views/test/components/PermComp.js';

// 后台返回的角色权限列表
const roles = ['admin', 'apadmin'];
</script>