说明:
1. 全局自定义指令: 在所有的 vue 实例中都能使用
定义在 vue 实例之前, 使用 Vue.directive 来定义;
在 inserted() 方法中 实现自定义指令的逻辑;
在 dom元素 中, 使用 设置的自定义指令: v-指令名 ;
参数1: 指令名称 参数2: 对象结构, 内部包好一个 inserted() 方法 - inserted( )方法有一个 el 参数, 就是设置的指令要进行操作的 dom 元素 Vue.directive('指令名', { inserted: function(el) { ... 实现自定义指令的逻辑 /** 判断 某一个数组 是否 包含 另一个数组中的某一项, 这样设置的优点在于, 你完全可以根据 角色 来进行鉴权 <Button v-auth="['admin', "user"]">修改</button> 表示 管理员 和 用户 都拥有这个按钮的权限 <Button v-auth="['user001']">修改</button> 表示 只要用户个人信息中的 permisson中含有 'user001', 就拥有这个 修改用户按钮的权限 function includeArray (list1, list2) { let status = false; list2.forEach(item => { if (list1.includes(item)) status = true; return status; /** 说明: 如果管理员 对于 任何一个用户对 每个页面 配置不同的 权限, 而不仅仅是通过 角色 进行控制权限, 那么: - 在登录后, 获取个人信息时, 需要返回该用户拥有的 所有按钮 权限的 数据, 暂时定义: permission (数组类型), 里面保存的是 各个按钮的权限 permission: ['user001', 'user002'] 表示用于 修改用户按钮 和 删除用户按钮 的权限 - 登录后将获取到的个人信息保存在 vuex中: store/modules/admin/user.js state/info, info.permission就是该用户 拥有的所有按钮的权限 const hasAccess = { install (Vue, options) { // 自定义指令: Vue.directive('auth', { inserted (el, binding, vnode) { const { value } = binding; // 获取该用户所有按钮的权限 const assess = store.state.admin.user.info.permission; if(value && value insanceOf Array && value.length && access && access.length) { const isPermission = includeArray(value, access); if (!isPermission) { el.parentNode && el.parentNode.removeChild(el); export default hasAccess;