Mi proyecto VueJs usa Axios para enviar solicitudes de servidor. Algunas de las solicitudes del lado del servidor necesitan un usuario autenticado con JWT.

Me gustaría crear un servicio genérico del lado del cliente para realizar estas solicitudes autenticadas y, si no está autenticado, mi usuario debe ver un formulario de inicio de sesión modal.

Entonces, creé un Mixin para hacerlo:

 import ModalLogin from '../../components/ModalLogin'; import Vue from 'vue' export default { components: { ModalLogin }, data: function () { return { ModalLoginComponent } }, methods: { authorizedGet(url) { if(!localStorage.getItem('user')) { this.instantiateModal() this.data().ModalLoginComponent.methods.show() } }, instantiateModal() { var ModalLoginClass = Vue.extend(ModalLogin) this.ModalLoginComponent = new ModalLoginClass() this.ModalLoginComponent.$mount() } } }

y un componente ModalLogin básico. Pero, obviamente, no sé cómo agregar mi ModalLogin a mi DOM desde un mixin. Me gustaría que mi modal sea global para toda mi aplicación.