Защита маршрутов в Vue

Если в приложении есть закрытые страницы, доступ к которым могут получить только авторизованные пользователи, например личный кабинет. Для этого можно использовать навигационные охранники.

Функция beforeEnter проверяет, авторизован ли пользователь. Если да, то она разрешает навигацию next(), если нет перенаправляет на страницу логина next('/login'):

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