Tengo un problema en el que mi interfaz de usuario principal todavía se muestra durante unos segundos después de hacer clic en el botón de cierre de sesión.

Como resultado, el componente del formulario de inicio de sesión se muestra momentáneamente dentro de la plantilla principal de la interfaz de usuario antes de mostrarse en una página en blanco.

Tengo un archivo App.vue con esta configuración.

 <template> <v-app id="app"> <template v-if="!signedIn"> <router-view></router-view> </template> <template v-if="signedIn"> // main app UI here ...still shows for a couple of seconds with the login form inside it </template> </template>

El valor signedIn determina si se muestra o no la interfaz de usuario de la aplicación principal. Funciona, pero como digo, hay un momento en el que tanto la interfaz de usuario principal como el formulario de inicio de sesión aparecen en la interfaz.

Tengo el siguiente middleware de ruta configurado donde userModule.checkUserSignedIn simplemente obtiene el valor actual de signedIn .

 function requireAuth(to: TODO, from: TODO, next: TODO) { if (!userModule.checkUserSignedIn()) { console.log('User not signed in..') next({ path: "/login", query: { redirect: to.fullPath } }); } else { console.log('User is signed in..') next(); } } })

La ruta de inicio de sesión es simple.

 { path: "/login", component: Login, name: "Login" }

No estoy seguro de qué está causando que esto suceda y me he topado con un callejón sin salida. Si alguien puede ayudarme a encontrar la manera de solucionar esto, se lo agradecería mucho. ¡Gracias por adelantado!