先说permission指令
/**
* v-permission角色权限处理
*
*/
import store from '@/store'
export default {
inserted(el, binding, vnode) {
// 解构拿到v-permission绑定的值
const { value } = binding
// 获取getters里面的roles
const roles = store.getters && store.getters.roles
if (value && value instanceof Array && value.length > 0) {
const roleFlag = value
// 判断roles中是否含有v-permission绑定的值
const hasPermission= roles.some(role => {
return super_admin === role || roleFlag.includes(role)
})
// 若用户没有权限,就找到父节点,然偶在父节点将节点依次删除
if (!hasPermission) {
el.parentNode && el.parentNode.removeChild(el)
}
} else {
throw new Error(`使用方式:v-permission=['admin','editor']"`)
}
}
}
但这样实际上也有坑,因为有的元素可能找不到父节点。可以直接用v-if控制。
因为permission是dom删除, v-if是组件删除。