After clicking the logout button, I am experiencing an issue where my main UI remains visible for a few seconds before transitioning to a blank page and displaying the login form component.
This behavior is occurring within the setup of my App.vue file:
<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>
The signedIn value determines the visibility of the main app UI, but there seems to be a delay during which both the main UI and the login form are displayed simultaneously.
I have set up route middleware utilizing the userModule.checkUserSignedIn function to check the signedIn status:
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();
}
}
})
The login route setup is straightforward:
{ path: "/login", component: Login, name: "Login" }I am unsure of the root cause of this issue and would appreciate any guidance on how to address it. Thank you for your assistance!