He seguido la guía de una serie de publicaciones sobre Stack Overflow y otros sitios web sobre la configuración de rutas Vue para verificar la autenticación del usuario. La configuración que tengo ahora funciona esencialmente correctamente (para cada ruta, el estado de autenticación del usuario se verifica y se redirige a la página de inicio de sesión si es necesario), pero hay un pequeño problema justo antes de que se redirija al usuario, el estándar Nuxt/Vue La pantalla de la página 404 parpadea momentáneamente.
Este es un ejemplo de cada ruta que requiere autenticación de usuario que tengo en router.js:
... { path: '/question/:id/comments', name: 'comments', component: page('Comments.vue'), meta: {requiresAuth: true}, beforeEnter: (to, from, next) => { guard(to, from, next); } }, ... Y aquí está mi función guard() que verifica la autenticación del usuario y luego los redirige con next() según sea necesario:
const guard = function(to, from, next) { axios.get(process.env.apiUrl + 'check-auth').then(response => { if( to.matched.some( record => record.meta.requiresAdmin ) ) { if( response.data.is_moderator !== 1 ) { next({ path: '/' }); } else { next(); } } else if( to.matched.some( record => record.meta.requiresAuth ) ) { if( !response.data.id ) { next({ path: '/login', params: { nextUrl: to.fullPath } }); } else { next(); } } else { next(); } }); }; Muchos artículos en línea sugirieron usar localStorage para verificar la autenticación del usuario, pero esto no funciona en router.js (presumiblemente porque es del lado del servidor y no del lado del cliente), pero lo solucioné usando una llamada a la API de Laravel con Axios para verificarlo en su lugar.
Si alguien puede arrojar alguna luz sobre por qué la pantalla 404 parpadea primero antes de la redirección. Ir a las rutas directamente funciona bien, así que supongo que debe tener algo que ver con el método next() .
Probablemente esté esperando una respuesta de axios durante un breve período de tiempo. Puede usar el enfoque async/await y esperar la respuesta de axios antes de navegar a una ruta. La ruta quedaría así:
async beforeEnter: (to, from, next) => { await guard(to, from, next); }Y en tu guardia harías algo como esto:
const guard = async function(to, from, next) { const response = await axios.get(process.env.apiUrl + 'check-auth') if( to.matched.some( record => record.meta.requiresAdmin ) ) { ...El resto sería lo mismo. Esto esperaría una respuesta antes de navegar a una ruta.