I've decided to create my own system for managing roles and rights in Vue since the existing options are not meeting my needs.
Currently, I am able to hide an element when a user lacks the necessary role, but what I really want is to completely prevent the component from being rendered. However, I'm unsure of how to accomplish this.
The code snippet below shows what I have so far:
app.directive('hasRole', hasRole)
import {useUserStore} from "@/stores/UserStore.js";
export default {
// called before bound element's attributes
// or event listeners are applied
created(el, binding, vnode, prevVnode) {
//console.log(el, binding, vnode, prevVnode)
},
// called right before the element is inserted into the DOM.
async beforeMount(el, binding, vnode, prevVnode) {
const userStore = useUserStore()
await userStore.fill()
console.log(userStore.getUser.roles.includes(binding.value))
if (!userStore.getUser.roles.includes(binding.value)) {
// el.style.display = 'none'; <---- this hides the element, so that works.
vnode = null
return el = null;
el.style.display = 'none';
}
},
// called when the bound element's parent component
// and all its children are mounted.
mounted(el, binding, vnode, prevVnode) {
//console.log(el, binding, vnode, prevVnode)
},
// called before the parent component is updated
beforeUpdate(el, binding, vnode, prevVnode) {
//console.log(el, binding, vnode, prevVnode)
},
// called after the parent component and
// all of its children have updated
updated(el, binding, vnode, prevVnode) {
//console.log(el, binding, vnode, prevVnode)
},
// called before the parent component is unmounted
beforeUnmount(el, binding, vnode, prevVnode) {
//console.log(el, binding, vnode, prevVnode)
},
// called when the parent component is unmounted
unmounted(el, binding, vnode, prevVnode) {
//console.log(el, binding, vnode, prevVnode)
}
}
If anyone knows how to prevent the rendering of the component altogether, please share your insight.