El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Guàrdies de navegació

Següent ►
►

Les guàrdies de navegació són una característica poderosa de Vue Router que permet controlar l'accés a les rutes de la teva aplicació. Aquestes guàrdies poden ser utilitzades per verificar permisos, autenticar usuaris, carregar dades abans de renderitzar una ruta, entre altres coses.

Tipus de guàrdies de navegació

Hi ha diversos tipus de guàrdies de navegació en Vue Router:

  1. Guàrdies globals: S'apliquen a totes les rutes.
  2. Guàrdies de ruta: S'apliquen a rutes específiques.
  3. Guàrdies de components: S'apliquen a components específics.

Guàrdies globals

Les guàrdies globals es defineixen directament en la instància de Vue Router. Hi ha tres tipus de guàrdies globals:

  • beforeEach: S'executa abans que es resolgui cada ruta.
  • beforeResolve: S'executa després que es resolguin totes les guàrdies de la ruta i els components.
  • afterEach: S'executa després que la navegació s'hagi completat.

Exemple de beforeEach

const router = new VueRouter({
  routes: [
    // les teves rutes aquí
  ]
});

router.beforeEach((to, from, next) => {
  // `to` és la ruta a la qual es vol navegar
  // `from` és la ruta des de la qual es ve
  // `next` és una funció que s'ha de cridar per continuar la navegació

  if (to.meta.requiresAuth && !isAuthenticated()) {
    // Si la ruta requereix autenticació i l'usuari no està autenticat
    next('/login'); // Redirigeix a la pàgina de login
  } else {
    next(); // Continua la navegació
  }
});

Guàrdies de ruta

Les guàrdies de ruta es defineixen directament en les rutes individuals. Hi ha dos tipus de guàrdies de ruta:

  • beforeEnter: S'executa abans que es resolgui la ruta.
  • beforeLeave: S'executa abans que es deixi la ruta.

Exemple de beforeEnter

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    beforeEnter: (to, from, next) => {
      if (!isAuthenticated()) {
        next('/login');
      } else {
        next();
      }
    }
  }
];

Guàrdies de components

Les guàrdies de components es defineixen dins dels components mateixos. Hi ha tres tipus de guàrdies de components:

  • beforeRouteEnter: S'executa abans que es resolgui la ruta.
  • beforeRouteUpdate: S'executa quan la ruta canvia però el component es reutilitza.
  • beforeRouteLeave: S'executa abans que es deixi la ruta.

Exemple de beforeRouteEnter

export default {
  name: 'Dashboard',
  beforeRouteEnter(to, from, next) {
    if (!isAuthenticated()) {
      next('/login');
    } else {
      next();
    }
  }
};

Exercicis pràctics

Exercici 1: Guàrdia global de navegació

  1. Crea una aplicació Vue amb Vue Router.
  2. Defineix una guàrdia global beforeEach que redirigeixi a /login si l'usuari no està autenticat i intenta accedir a una ruta que requereix autenticació.

Solució

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

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login');
  } else {
    next();
  }
});

Exercici 2: Guàrdia de ruta

  1. Defineix una ruta /admin que només sigui accessible per usuaris amb rol d'administrador.
  2. Utilitza una guàrdia de ruta beforeEnter per verificar el rol de l'usuari.

Solució

const routes = [
  { path: '/login', component: Login },
  { path: '/admin', component: Admin, beforeEnter: (to, from, next) => {
    if (getUserRole() !== 'admin') {
      next('/login');
    } else {
      next();
    }
  }}
];

Exercici 3: Guàrdia de component

  1. Defineix un component Profile que només permeti la navegació si l'usuari està autenticat.
  2. Utilitza la guàrdia de component beforeRouteEnter per verificar l'autenticació.

Solució

export default {
  name: 'Profile',
  beforeRouteEnter(to, from, next) {
    if (!isAuthenticated()) {
      next('/login');
    } else {
      next();
    }
  }
};

Resum

Les guàrdies de navegació són una eina essencial per controlar l'accés a les rutes de la teva aplicació Vue.js. Amb les guàrdies globals, de ruta i de components, pots assegurar-te que els usuaris només accedeixin a les pàgines permeses i que es compleixin les condicions necessàries abans de renderitzar una ruta. Practica amb els exercicis proporcionats per consolidar els teus coneixements sobre les guàrdies de navegació en Vue Router.

◄ Anterior
◄
Següent ►
►

Curs de Vue.js

Mòdul 1: Introducció a Vue.js

Mòdul 2: Conceptes bàsics de Vue.js

Mòdul 3: Components de Vue.js

Mòdul 4: Vue Router

Mòdul 5: Gestió d'estat amb Vuex

Mòdul 6: Directives de Vue.js

Mòdul 7: Plugins de Vue.js

Mòdul 8: Proves en Vue.js

Mòdul 9: Conceptes avançats de Vue.js

Mòdul 10: Construcció i desplegament d'aplicacions Vue.js

Mòdul 11: Projectes de Vue.js del món real

El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats