Guardas de navegación
Clase 11 de 17 • Curso de Vue.js: Navegación con Vue Router
Contenido del curso
Carlos Rodríguez
student•
hace 4 años
Brayan Angarita
student•
hace 3 años
Clase 11 de 17 • Curso de Vue.js: Navegación con Vue Router
Contenido del curso
Carlos Rodríguez
Brayan Angarita
Rafael Soriano Ramírez
Alexander Coronell
Navel Peña
Diana Martinez
Kevin Diaz
Diana Martinez
Esto es ideal para procesos de autenticación y autorización mediante información del backend. . Referencia: Navigation Guards
Es lo mismo prácticamente
Se me ocurren tantas cosas que en react tengo que hacer algunos artilugios y aquí en dos patadas XD
Es cierto, por eso mientras más pretendo aprender React más me gustan Angular y VueJS
tengo un problema, quiero evitar que vayan por la url directo al login si estan autenticados y el siguiente código no hace nada, deja pasar al login, que estoy haciendo mal ? o no se puede evitar manipular la url? tengo un logout() que limpia el localstorage quiero que pasen por ahi antes de ir al login
const routes: RouteRecordRaw[] = [ { path: '/', name: 'Home', component: HomeVue, children: [ { path: '/', name: 'Productos', component: () => import('../views/Productos.vue'), }, ], }, { path: '/login', name: 'Login', component: VLoginVue }, ]; const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes, }); router.beforeEach(async (to, from, next) => { const isLoggedIn = () => { const token = localStorage.getItem('token'); return !!token; }; if (!isLoggedIn && to.name !== 'Login') { next({ name: 'Login' }); } else if (to.name == 'Login' && isLoggedIn()) { next({ name: 'Productos' }); } else { next(); } }); export default router;
A mi me parece que tu sintaxis está correcta pero no puedo debuguearlo todo, creo que tendrías que ver si las variables están tomando los valores que esperas realmente, y si el objeto localStorage realmente está disponible, toma en cuenta que en algunos proyectos al usar SSR, ciertas cosas como el router se ejecutan en backend, y puede que el objeto no esté disponible.
Pero si podría ser algo de sintaxis también, te recomiendo revisar la documentación oficial, hay un ejemplo muy puntual de esto:
https://router.vuejs.org/guide/advanced/navigation-guards.html
apenas voy la mitad del curso y ya me aburrio :( por lo menos metele tantito css para que no se vea tan simple y de mas flojera, se que es de navigation con router pero se podria ver mejor implementando un ejemplo mas visual
Gracias por el feedback, este no es un curso de CSS y escribirlo durante la clase tomaría tiempo de estudio en un tema que ni siquiera es parte del curso, pero en los últimos cursos (ya disponibles), lo que hicimos fue compartirles el CSS antes para que se vea mejor.