Desarrollamos una directiva personalizada de Vue que reemplaza los elementos DOM con un comentario dependiendo de si el usuario tiene permiso para información específica. Esta directiva funciona bien cuando la usamos en cualquier elemento DOM, pero cuando la aplicamos a otro componente de Vue no funciona como se esperaba porque se llama a la función mounted() , lo cual no queremos.

El problema realmente es que no queremos renderizar ese componente, específicamente si tiene una llamada API porque esto hace que todo el sistema falle.

Aquí está el código de la directiva:

 Vue.directive("checkPermission", { bind: (el, binded, vnode) => { let permissions = self.$nuxt.$store.$auth.user.permissions; if ( !self.$nuxt.$store.$auth.user.isAdmin && permissions && permissions.length > 0 ) { let hasPermission = false; const { action, subject } = binded.value; hasPermission = permissions.some( permmission => permmission.action === action && (Array.isArray(subject) ? subject.includes(permmission.subject) : permmission.subject === subject) ); if (!hasPermission) { const comment = document.createComment(" "); Object.defineProperty(comment, "setAttribute", { value: () => undefined }); vnode.text = " "; vnode.elm = comment; vnode.isComment = true; vnode.context = undefined; vnode.tag = undefined; vnode.data.directives = undefined; vnode.children = undefined if (vnode.componentInstance) { vnode.componentInstance.$el = comment; } if (el.parentNode) { el.parentNode.replaceChild(comment, el); } } } },