Cómo proteger rutas con Vue Router

• 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.