vue 权限指令

在开发后台管理系统中，按钮权限判断是必须的！以下是一个简易的权限判断指令，实际还需要结合自己业务来：

全局权限指令：

// src/main.js
import permission from './permission/index'
Vue.directive('permission', permission)

// src/permission/index.js
import store from 'store'
export default {
    inserted(el, binding) {
        const { value } = binding
        const roles = store.getters // 获取vuex中的权限，一般是一个数组 [1, 2, 8, ···]
        if (value && value.length > 0 && value instanceof Array) {
            // 这块为什么用some，相对every来说，some是只要符合条件即可该值，every需要全部遍历完，
            // 性能比every好一些！
            const hasPermission = roles.some(role => value.includes(role)})
            if (!hasPermission) {
                el.parentNode && el.parentNode.removeChild(el) // 被绑定的指令，必须要有父级
            }
        }else {
            throw new Error('指令绑定的值必须为数组且不可为空数组')
        }
    }
}