Guardas de navegación

Clase 11 de 17 • Curso de Vue.js: Navegación con Vue Router

Carlos Rodríguez

student•

Esto es ideal para procesos de autenticación y autorización mediante información del backend. . Referencia: Navigation Guards

Brayan Angarita

student•

Es lo mismo prácticamente

Rafael Soriano Ramírez

student•

Se me ocurren tantas cosas que en react tengo que hacer algunos artilugios y aquí en dos patadas XD

Alexander Coronell

student•

Es cierto, por eso mientras más pretendo aprender React más me gustan Angular y VueJS

Navel Peña

student•

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;

Diana Martinez

student•

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

Kevin Diaz

student•

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

Diana Martinez

student•

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.