按钮鉴权（UI鉴权）

首先要用到自定义指令，挂载全局use ，通过小型vue创建自定义指令，在页面上使用自定义指令并进行传参（参数必须是数组），如果登录之后没有权限，就把对应的DOM删除。创建一个函数并且接收页面传给自定义指令中的参数，判断是否是数组不是的话抛出异常，获取存放在vuex中获取用户的权限， 判断用户的权限是否包含传入的值在去删除节点，如果传入了el，并且没有权限，删除当前dom。

创建一个directive文件夹，用来存放自定义指令
import store from '@/store'

// 判断是否有权限
function hasPermisson(value,el=false){
    // 判断传入的值是否为数组
    if(!Array.isArray(value)){
        throw new Error(`需要传入一个数组，比如：['admin','editor']`)
    }
    // 获取用户的权限
    const roles = store.state.user.ruleNames
    // 判断用户的权限是否包含传入的值
    const hasAuth = value.findIndex((v)=>roles.includes(v)) !== -1
    // 如果没有权限，删除当前dom
    if(el && !hasAuth){ // 如果传入了el，并且没有权限
        el.parentNode && el.parentNode.removeChild(el) // 删除当前dom
    }
    // 返回是否有权限
    return hasAuth
}

export default {
    // Vue.use() 会调用install方法
    install(add){
        // 自定义指令
        add.directive('permission', {
            // 当被绑定的元素插入到 DOM 中时……
            mounted(el, binding){
                // 判断是否有权限
                hasPermisson(binding.value,el)
            } 
        })
    }
}
引入到main.js中 注册全局自定义指令使用

// 自定义指令
import permission from '@/directive/permission'
// 在用app抛出
app.use(permission)