需求描述

根据当前登录用户的角色来控制某些操作按钮是否显隐。

解决办法

在按钮对应的html上使用自定义指令，指定具有某权限的用户才显示该按钮。

1.在src/utils下新建文件btnPermission.js，代码如下：

/*
使用方法：在html template中使用，如:
<n-form-item v-need-permi="['maintainer', 'developer']">
    ...省略控件代码...
</n-form-item>。
当用户角色为'maintainer'或者 'developer'时，该n-form-item包裹的控件显示在页面中，否则不显示。
说明：v-need-perimi在main.js中注册。
*/

import store from '@/store';
// 自定义指令方法，在组件生命周期的mounted和updated中都调用，见：https://cn.vuejs.org/guide/reusability/custom-directives.html#directive-hooks
const needPermi = (el, binding, vnode) => {
    // 获取页面传递的权限
    let btnPermissionsArr = [];
    if(binding.value){
        // 指定传值
        btnPermissionsArr = binding.value;
    }
    // vue3与vue2不同，vue3的vnode没有路由信息，无法获取在路由文件meta中配置的权限信息
    // else{
    //    btnPermissionsArr = vnode.context.$route.meta.btnPermissions; // 路由传值
    //}
    
    // 隐藏dom
    if(!_has(btnPermissionsArr)){
        // 不能像react那样操作如"el.children = '';"，因为这个children是只读属性
        if(!el.parentNode){
            el.style.display = 'none';
        }else{
            el.parentNode.removeChild(el);
        }
    }
}

// 权限检测方法
const _has = function(value){
    let isExist = false; // 默认当前用户没有访问按钮的权限
    let role = store.getters.outSideRole; // 当前用户的角色
    if(role == undefined || role == null){
        return false;
    }
    // role为当前登录的用户的角色，value为使用v-needPermi指令时传入的角色
    if(value.includes(role)){
        isExist = true;
    }
    return isExist;
}

export {needPermi}

注意：上面代码中角色信息是从store获取的，可根据自己项目情况修改获取角色信息的方式。

2.修改main.js，注册自定义指令。

...省略

import  {needPermi} from '@/utils/btnPermission.js';
import {createApp} from 'vue';
import App from './App.vue';

let instance = createApp(App);
instance.directive('need-permi', needPermi); // 注册自定义指令

...省略

参考： 1.基于VUE自定义指令实现按钮级权限控制 2.vue自定义指令