He estado atascado en este tema durante horas. estoy usando vue3
Estoy tratando de usar un protector beforeRouterEnter para verificar qué rol de usuario está conectado actualmente y, en función de eso, redirigir al usuario a la ruta adecuada.
Después de enviar el formulario de inicio de sesión (Desde la página de inicio de sesión), el userRoleId se almacena en el vuex y me redirigen a una página de inicio. La página de inicio tiene el siguiente script:
beforeRouteEnter(to, from, next) { next((vm) => { if (vm.$store.getters.userRoleId == USER) { next("/us"); return; } if (vm.$store.getters.userRoleId == ADMIN) { next("/ad"); return; } if (vm.$store.getters.userRoleId == SUPER_ADMIN) {; next("/sa"); return; } next(); }); },Sigo recibiendo la siguiente advertencia 'La devolución de llamada "siguiente" se llamó más de una vez en un guardia de navegación al pasar de "/" a "/". Se debe llamar exactamente una vez en cada guardia de navegación. Esto fallará en la producción.
El error está ahí cuando: NO HE INICIADO SESIÓN y me muevo al bloque else (Tan pronto como se alcanza la línea next() ), o cuando estoy conectado y desde dentro de donde if la declaración sea verdadera tan pronto como next() se alcanza, lo que hace que la redirección no funcione.
Es un error llamar al next dentro de next devolución de llamada. La navegación ya ha finalizado en ese momento, debería haber sido una redirección con router.push en su lugar, y este tipo de lógica pertenece al componente mounted (la next devolución de llamada se ejecuta después) en lugar de la protección del enrutador.
No debería haber redirecciones aquí porque son innecesarias. Una tienda es global y se puede importar directamente en lugar de acceder a ella en vm .
Debería ser:
import store from '...'; ... beforeRouteEnter(to, from, next) { if (store.getters.userRoleId == USER) { next("/us"); } else if ... { ... } else { next(); } },