Защита отдельных маршрутов

Vue Router предоставляет мощный механизм для контроля доступа к различным маршрутам в приложении. Защита маршрутов позволяет ограничивать доступ на основе состояния пользователя, ролей или других условий, обеспечивая безопасность и правильную навигацию.

Навигационные охранники

Навигационные охранники (navigation guards) — ключевой инструмент для защиты маршрутов. Они позволяют выполнять проверку перед переходом на маршрут и решать, разрешать или запрещать переход. В Vue Router выделяются несколько видов охранников:

  • Глобальные охранники

    • beforeEach: вызывается перед каждым переходом
    • afterEach: вызывается после каждого перехода

  • Охранники маршрута Определяются прямо в объекте маршрута через свойство beforeEnter

  • Охранники компонента Определяются внутри компонента через методы beforeRouteEnter, beforeRouteUpdate и beforeRouteLeave

Пример глобального охранника
router.beforeEach((to, from, next) => {
  const isAuthenticated = Boolean(localStorage.getItem('authToken'));
  if (to.meta.requiresAuth && !isAuthenticated) {
    next({ name: 'Login' });
  } else {
    next();
  }
});

В этом примере проверяется мета-свойство маршрута requiresAuth. Если маршрут требует аутентификации, а пользователь не авторизован, выполняется редирект на страницу входа.

Использование мета-свойств

Мета-свойства (meta) позволяют хранить дополнительную информацию о маршруте. Обычно используют для:

  • Определения необходимости аутентификации
  • Хранения ролей пользователей
  • Настройки видимости элементов интерфейса
Пример мета-свойств для ролей
const routes = [
  {
    path: '/admin',
    component: AdminPanel,
    meta: { requiresAuth: true, roles: ['admin'] }
  },
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true, roles: ['admin', 'user'] }
  }
];

В глобальном охраннике можно проверять роль пользователя:

router.beforeEach((to, from, next) => {
  const userRole = localStorage.getItem('userRole');
  if (to.meta.requiresAuth) {
    if (!localStorage.getItem('authToken')) {
      return next({ name: 'Login' });
    }
    if (to.meta.roles && !to.meta.roles.includes(userRole)) {
      return next({ name: 'Forbidden' });
    }
  }
  next();
});

Защита отдельных маршрутов через beforeEnter

Охранник маршрута beforeEnter вызывается только при попытке перейти на конкретный маршрут. Это полезно для маршрутов с ограниченным доступом, не требующих глобальной проверки.

const routes = [
  {
    path: '/settings',
    component: Settings,
    beforeEnter: (to, from, next) => {
      const isAdmin = localStorage.getItem('userRole') === 'admin';
      if (!isAdmin) {
        next({ name: 'Forbidden' });
      } else {
        next();
      }
    }
  }
];

Охранники компонентов

Для защиты внутри компонента используются методы:

  • beforeRouteEnter(to, from, next) — вызывается перед входом на маршрут
  • beforeRouteUpdate(to, from, next) — вызывается при обновлении маршрута, если компонент уже смонтирован
  • beforeRouteLeave(to, from, next) — вызывается перед уходом с маршрута
Пример проверки в компоненте
export default {
  beforeRouteEnter(to, from, next) {
    const isAuthenticated = !!localStorage.getItem('authToken');
    if (!isAuthenticated) {
      next({ name: 'Login' });
    } else {
      next();
    }
  }
}

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

Асинхронная проверка доступа

Vue Router поддерживает асинхронные проверки. Навигационные охранники могут работать с промисами:

router.beforeEach(async (to, from, next) => {
  try {
    const user = await fetchUserData();
    if (to.meta.requiresAuth && !user.isLoggedIn) {
      return next({ name: 'Login' });
    }
    next();
  } catch (error) {
    next({ name: 'Error' });
  }
});

Асинхронные охранники позволяют интегрировать проверку с сервером, получать права пользователя и подгружать данные перед переходом.

Редиректы и запрещённые маршруты

Для маршрутов, доступ к которым запрещён, можно использовать:

  • Редирект на страницу логина
  • Редирект на страницу «403 Forbidden»
  • Показ всплывающего уведомления или модального окна
Пример маршрута Forbidden
const routes = [
  {
    path: '/forbidden',
    component: ForbiddenPage
  }
];

Глобальный охранник перенаправляет пользователя на /forbidden, если его права не соответствуют требуемым.

Практические советы

  • Использовать мета-свойства для централизованной логики доступа
  • Применять глобальные охранники для общих проверок
  • Использовать beforeEnter для специфических маршрутов
  • В компонентах использовать beforeRouteLeave для защиты от потери данных

Эти методы совместно создают гибкую и надежную систему защиты маршрутов в Vue Router.

Оглавление