• En la mayoría de proyectos seguramente tendrás que proteger el acceso a algunas de las rutas con ciertos requisitos, es decir, exigir una autentificación por parte del usuario.
  • A través de un middleware (es decir, algo que se interpone entre el origen y el destino de la navegación) con Vue Router puedes crear este tipo de protección de rutas y denegar el acceso o redirigir a otra ruta si así lo decides.
  • Estos guardianes de ruta pueden ser ser globales, por ruta o incluso por componente.
  • Vamos a examinar los guardianes de ruta a nivel global creando una supuesta área privada de usuario y un formulario para autentificarse. Sólo tras una autentificación correcta dejaremos que el usuario navegue a la ruta protegida. De lo contrario será redirigido a login.
  • Primero, creamos el nuevo estado, mutaciones y acciones en nuestra store Vuex.
state: {
    ...
    username: null,
    auth: null
  },
mutations: {
  ...
  doLogin(state, username) {
    state.auth = true;
    state.username = username;
  },
  doLogout(state) {
    state.auth = false;
    state.username = null;
  }
},
actions: {
  ...
  doLogin({ commit }, username) {
    commit("doLogin", username);
  },
  doLogout({ commit }) {
    commit("doLogout");
  }
},
  • Luego tenemos que crear esa área privada del usuario en UserDashboard.vue con su método para hacer logout conectando con Vuex.
...
methods: {
  onLogout() {
    this.$store.dispatch("doLogout");
    this.$router.push("/");
  }
}
  • Ahora creamos la nueva vista AppLogin.vue con su formulario de autentificación conectado a un método que hace uso de la acción Vuex.
...
methods: {
  async onSubmit() {
    try {
      await this.$store.dispatch("doLogin", this.username);
      this.$router.push({ name: "Dashboard" });
    } catch (error) {
      console.error(error);
    }
  }
}
  • No podemos olvidar añadir un punto en el menú principal que haga uso de la nueva sección Dashboard.
<router-link :to="{ name: 'Dashboard' }">Dashboard</router-link>
  • Con todo listo nos queda ir a nuestro archivo de rutas en router/index.js y añadir la nueva ruta. Si te pregunta cómo haremos saber a Vue Router que esta nueva ruta debe de estar protegida de alguna forma la respuesta es metadatos.
  • Como ves podemos añadir metadatos (información extra) a cada una de las rutas a través de la propiedad meta. Esta propiedad luego es accesible en el proceso de navegación de una ruta a otra, por lo que se puede consultar y establecer así lógica de validación de usuario.
  • Nosotros usaremos la meta propiedad requiresAuth con valor true y también añadiremos la ruta para hacer login.
{
  path: "/dashboard",
  name: "Dashboard",
  meta: {
    requiresAuth: true
  },
  component: () =>
    import(/* webpackChunkName: "Dashboard" */ "../views/UserDashboard")
},
{
  path: "/login",
  name: "Login",
  component: () => import(/* webpackChunkName: "Login" */ "../views/AppLogin")
},
  • Por último podemos utilizar beforeEach a nivel global para preguntar si el usuario está autentificado y dejarle acceder si lo está o moverlo a hacer login si no lo está.
router.beforeEach((to, from, next) => {
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    if (store.state.auth) {
      next();
    } else {
      next({ name: "Login" });
    }
  } else {
    next();
  }
});
  • Como ves el callback next es imprescindible para completar la navegación. Podemos usarlo sin parámetros o bien indicándole dónde queremos navegar.
  • No sólo dispones del guard beforeEach sino que tienes acceso a otros puntos en el proceso de navegación. Como ves algunos son globales (como el que hemos usado) pero también existen por rutas o en los propios componentes.
Storyblok: el primer CMS headless tanto para desarrolladores como para marketers

El primer headless CMS tanto para desarrolladores como para marketers. Pruébalo gratis.

Código inicial
Curso Vue Router en Escuela Vue

¿Tienes alguna pregunta sobre esta lección de Aprende a enrutar con Vue Router ?

Resuelve todas tus dudas sobre Vue Router en la Comunidad de Escuela Vue: un lugar donde participar, aprender y ayudar. ¡Te esperamos!.

Tras el registro (si no lo has hecho ya) serás redirigido/a al canal adecuado en la Comunidad.

Twitter

Sigue el día a día y todo lo relacionado con Escuela Vue a través de su cuenta de Twitter.

Discord

En la Comunidad de Escuela Vue podrás solucionar tus dudas y ayudar a otras personas como tú a solucionar las suyas.

Recibe novedades en tu 📬