Tengo la siguiente configuración con Auth0 y Nuxt.js. De alguna manera, después de loginWith , la página continúa mostrándose por un breve momento antes de redirigir a la página de inicio de sesión de Auth0. La promesa devuelta por loginWith no está undefined , lo que hace que sea imposible bloquearla. ¿Hay alguna manera de proceder inmediatamente con el inicio de sesión de Auth0 sin mostrar la página primero?
if (!this.$auth.loggedIn) { await this.$auth.loginWith("auth0"); } const user = this.$auth.user; // Operations using user information below //En primer lugar , no debe bloquear el renderizado hasta que se complete alguna operación asíncrona. Básicamente, se requiere la llamada asíncrona a una función decorada con "await" para permitir que el subproceso de la interfaz de usuario haga su trabajo. En lugar de bloquear el procesamiento, debe mostrar información útil para el usuario, al menos algún mensaje que describa el proceso que se está realizando: "Autorizando..." o algo así.
Para resolver su problema, puede declarar alguna variable booleana en su componente (o en su tienda vuex) que se establece en falso hasta que el usuario esté autorizado. Al verificar este valor en su plantilla html, puede evitar que se muestre el contenido de la página hasta que el navegador sea redirigido a la página de autenticación.
data() { return { isAuthorized: false; } } // your code if (!this.$auth.loggedIn) { await this.$auth.loginWith("auth0"); } else { this.isAuthorized = true; } // process user informationEl ' espera esto.$auth.loginWith("auth0"); ' está causando el breve momento de retraso. Este es el tiempo requerido para verificar si la sesión actual está activa. Esto se puede manejar agregando algo como una página de carga.
showLoadingPage(); // display a fullscreen loading animation or text if (!this.$auth.loggedIn) { await this.$auth.loginWith("auth0"); } hideLoadingPage(); // hide the loading animation after the await completes const user = this.$auth.user; // Operations using user information below //