Navigation guards

↑ 5.1 Vue Router · ← Предыдущая · → Следующая

Обязательно~3 мин чтенияУровень: middle

Зачем это на собесе

Защита маршрутов и логика перед переходом; частый вопрос про порядок guard-ов.

Объяснение

Guard решает: разрешить, отменить или перенаправить навигацию.

router.beforeEach(async (to, from) => {
  const auth = useAuthStore();                              // Pinia доступна после app.use(pinia)
  if (to.meta.requiresAuth && !auth.isAuthenticated) {
    return { name: "login", query: { redirect: to.fullPath } };     // редирект
  }
  if (to.meta.roles && !auth.hasAnyRole(to.meta.roles)) return { name: "forbidden" };
  // return true / undefined — разрешить; return false — отменить
});
router.afterEach((to, from, failure) => { document.title = to.meta.title ?? "App"; analytics.page(to.fullPath); });
router.onError((err) => report(err));

Уровень	Хук
Глобальные	beforeEach, beforeResolve, afterEach
На маршруте	beforeEnter
В компоненте	onBeforeRouteUpdate, onBeforeRouteLeave, (Options: beforeRouteEnter)

Порядок: beforeRouteLeave (уходящий компонент) → глобальный beforeEach → beforeRouteUpdate (переиспользуемые) → beforeEnter (маршрут) → разрешение асинхронных компонентов → beforeRouteEnter → глобальный beforeResolve → навигация подтверждена → afterEach → обновление DOM.

onBeforeRouteLeave(() => {
  if (form.isDirty && !confirm("Есть несохранённые изменения. Уйти?")) return false;    // защита от потери данных
});

Использования: аутентификация и роли, загрузка обязательных данных (await), несохранённые изменения, аналитика, лоадер навигации, смена document.title.

Guards выполняются последовательно; async guard блокирует переход до завершения.

Нюансы и подводные камни

• Старая сигнатура с next() устарела: используйте возвращаемое значение; нельзя вызывать next дважды.
• Бесконечные редиректы (логин → главная → логин): проверяйте условие.
• Клиентские guards — UX, а не безопасность: права проверяются на сервере.
• Тяжёлые запросы в beforeEach тормозят каждый переход: кэшируйте.
• Инициализация состояния (например, восстановление сессии) должна завершиться до первой навигации.

Практика

1. Реализуйте guard авторизации и ролей с редиректом на логин.
2. Добавьте предупреждение о несохранённых изменениях.
3. Покажите глобальный индикатор загрузки на время навигации.

Вопросы с ответами

Какие бывают navigation guards?

Глобальные (beforeEach/beforeResolve/afterEach), на маршруте (beforeEnter) и в компоненте (onBeforeRouteLeave/Update).

Защищают ли guards от доступа к данным?

Нет, они ограничивают только интерфейс: доступ к API должен проверять сервер.

Связанные темы

• Программная навигация
• Meta-поля маршрутов и доступ по ролям