Estoy tratando de establecer algunas rutas a las que los usuarios pueden y no pueden acceder en mi aplicación, pero a veces mi navegador se congela y no me da ningún mensaje de error, así que no sé qué estoy haciendo mal.
En el primer IF, verifico si la ruta necesita autenticación para ser verdadera para acceder, si es falsa, envío al usuario a la página de inicio de sesión. Luego compruebo que el usuario del grupo está adentro, si falla, redirijo a la página raíz "/". Y si ninguna de estas declaraciones IF es verdadera, simplemente redirijo a la página a la que el usuario desea navegar.
router.beforeEach((to, from, next) => { const isAuth = localStorage.getItem("auth"); const userGroupRaw = localStorage.getItem("userData"); const accessGroup = to.meta.group; let userGroup; if (userGroupRaw) { userGroup = JSON.parse(userGroupRaw).id_access; } if (to.matched.some((record) => record.meta.requiresAuth)) { console.log("if1"); if (isAuth === "false") { next({ path: "/login" }); } if ( (accessGroup === 1 && (userGroup === 3 || userGroup === 4)) || !userGroup ) { next({ path: "/" }); } next(); } next(); }); export default router;Los documentos dicen "debes llamar a la next exactamente una vez" 1 . Si el primer if es verdadero, se llama dos veces. Si el segundo o el tercero if son verdaderos, se llama tres veces.
Es posible que deba regresar dentro de if s para evitar eso. O use sentencias else .
Actualizar para agregar ejemplos:
Aquí hay un ejemplo usando else (preferible si está en v3.x):
router.beforeEach((to, from, next) => { const isAuth = localStorage.getItem("auth"); const userGroupRaw = localStorage.getItem("userData"); const accessGroup = to.meta.group; let userGroup; if (userGroupRaw) { userGroup = JSON.parse(userGroupRaw).id_access; } if (to.matched.some((record) => record.meta.requiresAuth)) { console.log("if1"); if (isAuth === "false") { next({ path: "/login" }); } else if ( (accessGroup === 1 && (userGroup === 3 || userGroup === 4)) || !userGroup ) { next({ path: "/" }); } else { next(); } } else { next(); } }); export default router; 1: para la versión actual (v4.x), los documentos también dicen que se suponía que la next debía eliminarse, de acuerdo con este RFC . No veo una advertencia de desaprobación, pero se desaconseja su uso.
En ese caso, esta es una mejor solución para la versión actual:
router.beforeEach((to, from) => { const isAuth = localStorage.getItem("auth"); const userGroupRaw = localStorage.getItem("userData"); const accessGroup = to.meta.group; let userGroup; if (userGroupRaw) { userGroup = JSON.parse(userGroupRaw).id_access; } if (to.matched.some((record) => record.meta.requiresAuth)) { console.log("if1") if (isAuth === "false") { return { path: "/login" }; } if ( (accessGroup === 1 && (userGroup === 3 || userGroup === 4)) || !userGroup ) { return { path: "/" }; } } }); export default router;Como no está utilizando declaraciones 'else', está llamando a next() varias veces y golpeando un ciclo infinito (como se menciona en los comentarios).
En su lugar, puede return para detener el código en ese punto.
router.beforeEach((to, from, next) => { const isAuth = localStorage.getItem("auth"); const userGroupRaw = localStorage.getItem("userData"); const accessGroup = to.meta.group; let userGroup; if (userGroupRaw) { userGroup = JSON.parse(userGroupRaw).id_access; } if (to.matched.some((record) => record.meta.requiresAuth)) { if (isAuth === "false") { return next({ path: "/login" }); } if ( (accessGroup === 1 && (userGroup === 3 || userGroup === 4)) || !userGroup ) { return next({ path: "/" }); } // next(); - this is not needed as the preceding next always gets called. } next(); }) export default router;