指令使用方法
<el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['system:role:add']" # 指令字符 >新增</el-button> </el-col>
全局使用,main.js中定义方式
import directive from './directive' // directive Vue.use(directive) // 需要在new Vue之前完成
指令的定义
// hasrole import store from '@/store' export default { inserted(el, binding, vnode) { // 获取绑定值 const { value } = binding const super_admin = "admin"; const roles = store.getters && store.getters.roles if (value && value instanceof Array && value.length > 0) { const roleFlag = value const hasRole = roles.some(role => { return super_admin === role || roleFlag.includes(role) }) // 如果不存在角色,则从当前父节点删除 if (!hasRole) { el.parentNode && el.parentNode.removeChild(el) } } else { throw new Error(`请设置角色权限标签值"`) } } } // hasPermi import store from '@/store' export default { inserted(el, binding, vnode) { const { value } = binding const all_permission = "*:*:*"; const permissions = store.getters && store.getters.permissions if (value && value instanceof Array && value.length > 0) { const permissionFlag = value const hasPermissions = permissions.some(permission => { return all_permission === permission || permissionFlag.includes(permission) }) if (!hasPermissions) { el.parentNode && el.parentNode.removeChild(el) } } else { throw new Error(`请设置操作权限标签值`) } } }
结论:实现的过程其实很简单的,用户设置某一个按钮具有的权限,后台返回菜单权限,存入store中,前端写代码需要控制的时候使用类似: v-hasPermi="['system:role:add']" 的自定义指令,当组件创建的时候,会根据这里的值"['system:role:add']" 筛选用户是否有权限,如果没有,会在insert生命周期中删除父节点下当前节点,代码如下:
el.parentNode && el.parentNode.removeChild(el)
详细的上述代码已经写了的,可以自己看。