Прерывание навигации

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

Обработка перехода с использованием before

Navigo предоставляет метод before, который вызывается перед активацией маршрута. Этот метод принимает функцию-предикат, возвращающую true или false (или промис, который резолвится в true/false).

Пример базового использования:

const router = new Navigo('/');

router.before((done, match) => {
    if (match.url === '/protected' && !userIsLoggedIn()) {
        console.log('Доступ запрещён, переход прерван');
        done(false); // прерывает навигацию
    } else {
        done(); // продолжает навигацию
    }
});

router.on('/protected', () => {
    console.log('Вы перешли на защищённый маршрут');
});

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

  • done(false) — прерывает текущий переход.
  • done() или done(true) — позволяет навигации продолжиться.
  • match содержит информацию о маршруте, включая параметры и URL.

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

Функция before может работать с асинхронными операциями. Для этого достаточно вызвать done() внутри промиса или асинхронной функции:

router.before(async (done, match) => {
    if (match.url.startsWith('/admin')) {
        const authorized = await checkUserRole();
        if (!authorized) {
            alert('У вас нет прав для доступа к этому разделу');
            done(false);
            return;
        }
    }
    done();
});

Преимущества такого подхода:

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

Прерывание маршрута внутри хэндлеров

Помимо before, иногда требуется прервать навигацию уже внутри обработчика маршрута. В таких случаях можно использовать условные конструкции и возвращать управление без изменения состояния:

router.on('/edit/:id', (params) => {
    if (!hasUnsavedChanges()) {
        return; // навигация "не выполняется"
    }
    loadEditor(params.id);
});

Здесь фактическое прерывание происходит на уровне логики обработчика, хотя URL может измениться. Для полного контроля лучше использовать before.

Массовая обработка всех маршрутов

Navigo позволяет добавлять глобальный before для всех маршрутов:

router.before((done, match) => {
    if (needsMaintenance()) {
        console.log('Сайт на обслуживании, переходы заблокированы');
        done(false);
    } else {
        done();
    }
});

Это удобно для:

  • Централизованной проверки авторизации.
  • Блокировки переходов во время критических обновлений.
  • Управления состоянием всего приложения перед маршрутизацией.

Взаимодействие before и onLeave

Для полного контроля жизненного цикла маршрутов можно комбинировать before с onLeave. Метод onLeave вызывается при уходе с текущего маршрута и позволяет предотвратить потерю данных:

router.onLeave('/edit/:id', (done, params) => {
    if (hasUnsavedChanges()) {
        const confirmExit = confirm('Есть несохранённые изменения. Выйти?');
        done(confirmExit);
    } else {
        done();
    }
});

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

  • done(false) предотвращает уход с текущего маршрута.
  • Асинхронные проверки возможны через промисы.
  • Работает совместно с глобальным before, создавая гибкую систему управления навигацией.

Логика комбинации нескольких проверок

В сложных приложениях часто требуется несколько условий для навигации. Порядок вызова before имеет значение:

  1. Глобальный before.
  2. before на уровне маршрута.
  3. Обработчик onLeave предыдущего маршрута.

Для гарантированной блокировки навигации достаточно, чтобы хотя бы одна проверка вызвала done(false).

Резюме основных методов прерывания

Метод Сценарий использования Результат
router.before(fn) Проверка перед переходом на маршрут done(false) блокирует
router.onLeave(route, fn) Проверка при уходе с маршрута done(false) отменяет уход
Хэндлер маршрута Локальные проверки внутри маршрута Можно вернуть без выполнения действия

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

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

Оглавление