El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Guardias de Navegación

Siguiente ►
►

Introducción

Las guardias de navegación en Vue Router son funciones que se ejecutan antes de que una navegación se resuelva. Estas guardias permiten controlar el acceso a las rutas, realizar redirecciones, o ejecutar cualquier lógica antes de que la navegación ocurra. Son esenciales para implementar características como autenticación, autorización y otras verificaciones previas a la carga de una ruta.

Tipos de Guardias de Navegación

Vue Router proporciona varios tipos de guardias de navegación:

  1. Guardias Globales: Se aplican a todas las rutas.
  2. Guardias de Ruta: Se aplican a rutas específicas.
  3. Guardias de Componentes: Se aplican a componentes específicos.

Guardias Globales

Las guardias globales se definen en la instancia del router y se aplican a todas las rutas. Hay tres tipos de guardias globales:

  • beforeEach: Se ejecuta antes de que la navegación ocurra.
  • beforeResolve: Se ejecuta después de que todas las guardias de la ruta y del componente se hayan resuelto.
  • afterEach: Se ejecuta después de que la navegación haya sido confirmada.

Ejemplo de beforeEach

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ]
});

router.beforeEach((to, from, next) => {
  console.log('Navegando a:', to.path);
  next(); // Permite la navegación
});

Guardias de Ruta

Las guardias de ruta se definen directamente en las rutas y se aplican solo a esas rutas específicas. Hay dos tipos principales:

  • beforeEnter: Se ejecuta antes de que la navegación a la ruta ocurra.

Ejemplo de beforeEnter

const router = new VueRouter({
  routes: [
    {
      path: '/dashboard',
      component: Dashboard,
      beforeEnter: (to, from, next) => {
        if (isAuthenticated()) {
          next(); // Permite la navegación
        } else {
          next('/login'); // Redirige a la página de login
        }
      }
    }
  ]
});

Guardias de Componentes

Las guardias de componentes se definen dentro de los componentes y se aplican solo cuando el componente está siendo cargado. Hay tres tipos principales:

  • beforeRouteEnter: Se ejecuta antes de que la navegación a la ruta ocurra.
  • beforeRouteUpdate: Se ejecuta cuando la ruta actualizada reutiliza el componente.
  • beforeRouteLeave: Se ejecuta antes de que la navegación desde la ruta ocurra.

Ejemplo de beforeRouteEnter

const User = {
  template: '<div>User {{ id }}</div>',
  data() {
    return {
      id: null
    };
  },
  beforeRouteEnter(to, from, next) {
    // Llamar a next con una función para acceder a la instancia del componente
    next(vm => {
      vm.id = to.params.id;
    });
  }
};

Ejercicio Práctico

Ejercicio 1: Implementar una Guardia de Autenticación

Objetivo: Crear una guardia de navegación global que redirija a los usuarios no autenticados a una página de login.

  1. Configura el router con las rutas /home, /dashboard, y /login.
  2. Implementa una guardia global beforeEach que verifique si el usuario está autenticado.
  3. Redirige a /login si el usuario no está autenticado y trata de acceder a /dashboard.

Solución

const isAuthenticated = () => {
  // Simulación de autenticación
  return localStorage.getItem('auth') === 'true';
};

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/dashboard', component: Dashboard },
    { path: '/login', component: Login }
  ]
});

router.beforeEach((to, from, next) => {
  if (to.path === '/dashboard' && !isAuthenticated()) {
    next('/login'); // Redirige a la página de login
  } else {
    next(); // Permite la navegación
  }
});

Ejercicio 2: Implementar una Guardia de Ruta

Objetivo: Crear una guardia de ruta que solo permita el acceso a /admin si el usuario tiene el rol de administrador.

  1. Configura el router con las rutas /home, /admin, y /login.
  2. Implementa una guardia de ruta beforeEnter en la ruta /admin.
  3. Redirige a /login si el usuario no tiene el rol de administrador.

Solución

const isAdmin = () => {
  // Simulación de verificación de rol
  return localStorage.getItem('role') === 'admin';
};

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/admin', component: Admin, beforeEnter: (to, from, next) => {
      if (isAdmin()) {
        next(); // Permite la navegación
      } else {
        next('/login'); // Redirige a la página de login
      }
    }},
    { path: '/login', component: Login }
  ]
});

Conclusión

Las guardias de navegación en Vue Router son una herramienta poderosa para controlar el flujo de navegación en tu aplicación. Permiten implementar lógica de autenticación, autorización y otras verificaciones antes de que una ruta se cargue. Con los ejemplos y ejercicios proporcionados, deberías tener una comprensión sólida de cómo utilizar las guardias de navegación en tus proyectos Vue.js.

En el próximo módulo, exploraremos cómo gestionar el estado de la aplicación utilizando Vuex, lo que te permitirá manejar datos de manera más eficiente y estructurada.

◄ Anterior
◄
Siguiente ►
►

Curso de Vue.js

Módulo 1: Introducción a Vue.js

Módulo 2: Conceptos Básicos de Vue.js

Módulo 3: Componentes de Vue.js

Módulo 4: Vue Router

Módulo 5: Gestión de Estado con Vuex

Módulo 6: Directivas de Vue.js

Módulo 7: Plugins de Vue.js

Módulo 8: Pruebas en Vue.js

Módulo 9: Conceptos Avanzados de Vue.js

Módulo 10: Construcción y Despliegue de Aplicaciones Vue.js

Módulo 11: Proyectos Reales con Vue.js

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados