Контроль навигации через next

Vue Router предоставляет гибкие возможности для управления навигацией между маршрутами. Одним из ключевых инструментов для этого является функция next, используемая в навигационных охранниках (navigation guards). Она позволяет решать, разрешить ли переход, перенаправить пользователя или отменить переход полностью.

Использование next в глобальных охранниках

Глобальные охранники регистрируются на экземпляре маршрутизатора и применяются ко всем переходам. Основной метод — beforeEach:

router.beforeEach((to, from, next) => {
  // Логика проверки авторизации
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login'); // перенаправление на страницу входа
  } else {
    next(); // разрешение перехода
  }
});

Ключевые моменты:

  • next() — разрешает переход на запрошенный маршрут.
  • next(false) — отменяет текущий переход, оставляя пользователя на текущем маршруте.
  • next('/') или next({ path: '/' }) — выполняет перенаправление на указанный путь.
  • Любой вызов next должен быть вызван ровно один раз, иначе навигация зависнет.

Навигационные охранники маршрутов

Каждый маршрут может иметь собственный охранник beforeEnter:

const routes = [
  {
    path: '/admin',
    component: AdminPanel,
    beforeEnter: (to, from, next) => {
      if (hasAdminAccess()) {
        next();
      } else {
        next('/403'); // страница запрещено
      }
    }
  }
];

Особенности beforeEnter:

  • Выполняется только при входе на конкретный маршрут.
  • Позволяет изолировать логику проверки прав доступа для отдельного маршрута.
  • Отличие от beforeEach в том, что глобальные охранники срабатывают при каждом переходе, а beforeEnter — только при входе на конкретный маршрут.

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

Компоненты Vue могут объявлять собственные охранники через beforeRouteEnter, beforeRouteUpdate и beforeRouteLeave.

export default {
  beforeRouteEnter(to, from, next) {
    // Доступ к this невозможен здесь
    next(vm => {
      vm.fetchData(to.params.id);
    });
  },
  beforeRouteUpdate(to, from, next) {
    // Переход к тому же компоненту с новыми параметрами
    this.fetchData(to.params.id);
    next();
  },
  beforeRouteLeave(to, from, next) {
    if (this.hasUnsavedChanges) {
      const answer = window.confirm('У вас есть несохраненные изменения. Выйти?');
      next(answer);
    } else {
      next();
    }
  }
}

Примечания:

  • beforeRouteEnter не имеет доступа к экземпляру компонента через this до вызова next.
  • next может принимать функцию, которая получает экземпляр компонента после завершения навигации.
  • beforeRouteUpdate вызывается при изменении параметров маршрута без уничтожения компонента.
  • beforeRouteLeave подходит для предупреждения о несохраненных изменениях.

Параметры и объекты в next

next может принимать несколько типов аргументов:

  1. Без аргументов: next() — переход разрешён.
  2. Булевое значение: next(false) — переход отменён.
  3. Строка или объект маршрута: перенаправление:
next('/home'); 
next({ name: 'profile', params: { userId: 123 } });
  1. Функция обратного вызова: используется в beforeRouteEnter для доступа к компоненту.

Асинхронные операции в навигационных охранниках

Навигационные охранники часто выполняют асинхронные действия, например, проверку токена или загрузку данных:

router.beforeEach(async (to, from, next) => {
  try {
    const authorized = await checkAuthorization();
    if (authorized) {
      next();
    } else {
      next('/login');
    }
  } catch (error) {
    console.error(error);
    next('/error');
  }
});

Особенности:

  • Асинхронный код внутри охранников не блокирует интерфейс.
  • Важно вызвать next после завершения всех проверок или обработки ошибок.

Последовательность вызовов next

При навигации Vue Router вызывает охранники в строгом порядке:

  1. Глобальные beforeEach
  2. Охранники маршрута beforeEnter
  3. Внутренние охранники компонента beforeRouteEnter

Если один из охранников вызывает next(false), дальнейшие охранники не вызываются. Перехват и управление навигацией через next позволяют полностью контролировать поток маршрутов.

Практические сценарии

  • Авторизация и роли: блокировка доступа к маршруту для неавторизованных пользователей.
  • Предупреждение об уходе: запрос подтверждения при наличии несохранённых изменений.
  • Загрузка данных перед маршрутом: асинхронные проверки и подготовка состояния компонента до отображения.
  • Динамическое перенаправление: выбор маршрута на основе состояния приложения, геолокации или других условий.

Контроль навигации через next является фундаментальным инструментом для создания безопасных, отзывчивых и логически управляемых маршрутов в приложениях на Vue.js. Правильное использование позволяет полностью контролировать поток переходов и обрабатывать все возможные сценарии поведения пользователя.

Оглавление