一.定义一个全局方法,配合v-if实现;

在用户登录成功后,获取用户的按钮权限(数组格式),存储到store中

定义公共函数hasPermission

在main.js中引入,

在需要的按钮上使用即可

二.自定义指令

directives 在全局main.js中注册

路由配置：

{       path:'/permission',

      component: Layout,

      meta: { btnPermissions: ['admin','supper','normal'] //页面需要的权限

},

自定义指令：

// 权限检查方法
const permissionCheck = (value) => {
    let isExist = false;
    let btnPermissionsStr = sessionStorage.getItem("btnPermissions");
    console.log(btnPermissionsStr)
    if (btnPermissionsStr == undefined || btnPermissionsStr == null) {
        return false;
    }
    if (value.indexOf(btnPermissionsStr) > -1) {
        isExist = true;
    }
    return isExist;
};

/**权限指令**/
export default {
    inserted: (el, binding, vnode) => {
        // 获取按钮权限
        let btnPermissions = vnode.context.$route.meta.btnPermissions.split(",");
        // let btnPermissions = binding.value;
        console.log(vnode.context.$route.meta.btnPermissions, btnPermissions, permissionCheck(btnPermissions))
        if (!permissionCheck(btnPermissions)) {
            el.parentNode.removeChild(el);
        }
    }
};

然后在main.js文件引入文件 import myDirectives from '@/directives';

Object.keys(myDirectives).forEach(item => { Vue.directive(item, mideaDirectives[item]) });