Rutas privadas y hooks

Globales

Vue Router nos permite definir rutas privadas basándonos en los hooks que la librería nos da por defecto. De forma global:

router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
});
router.afterEach((to, from) => {
  // ...
})

O bien en la propia definición específica de una ruta si sólo lo necesitamos en ese componente específico.

routes: [
  {
    path: '/todo/add',
    component: ToDoForm,
    beforeEnter: (to, from, next) => {
      // ...
    }
  }
]

Dentro del componente

Dentro de la propia vista o componente que vayamos a cargar también podemos utilizar varios hooks sin tener que importar nada específico, de forma global a la SPA.

beforeRouteEnter (to, from, next) {}
beforeRouteUpdate (to, from, next) {}
beforeRouteLeave (to, from, next) {}

Con estos hooks podemos comprobar si un usuario tiene el permiso para acceder a una ruta determinada, añadiendo parámetros privados o comprobando cualquier otra opción que necesitemos. Lo común es utilizar metas en la ruta privada.

meta: {
  requiresAuth: true,
},