Estoy creando una aplicación Vue 3 que usa Vue Router y Pinia para la administración del estado.

En mi estado global, estoy definiendo una propiedad que me dice si un usuario ha iniciado sesión para que pueda navegar por la aplicación. Sin embargo, el proceso de inicio de sesión está siendo manejado por Cognito, así que una vez que entro en la aplicación, hago clic en el botón de inicio de sesión, me lleva a una pantalla de Cognito que maneja el proceso de inicio de sesión y luego me redirige a la página de inicio de mi aplicación.

Entonces, después de la redirección, extraigo algunos parámetros de la URL resultante y quiero guardarlos en el estado global, para esto estaba usando beforeEach guard para analizar la URL, verificar los parámetros, actualizar la tienda y luego leerlos para comprobar la sesión válida.

Pero mi problema fue que la navegación continuó incluso antes de que se actualizara el estado. Terminé usando setTimeout solo para ver si esperar un poco resolvió el problema y lo hizo

 router.beforeEach((to) => { const mainStore = useMainStore(); if (to.name === 'Login') { return; } if (to.hash !== '') { const queryParams = window.location.href.split('&'); const paramValues = queryParams.map(param => { }) const payload = { id_token: paramValues.find(param => param.name === 'id_token').value, access_token: paramValues.find(param => param.name === 'access_token').value, token_type: paramValues.find(param => param.name === 'token_type').value, isAuthenticated: true } //Here I'm trying to update my global state mainStore.updateTokens(payload); } // Here I use timeout, but before I just had the check for the property setTimeout(() => { if (!mainStore.isAuthenticated) return '/login'; }, 3000) });

¿Cómo debo manejar este caso? He leído sobre el protector beforeResolve pero no estoy seguro de cómo usarlo; Básicamente, solo necesito saber cómo debo realizar alguna operación asíncrona (como obtener datos del servidor) durante la navegación, no dentro de los componentes.