Условные переходы

Page.js — это микробиблиотека для маршрутизации в браузере на стороне клиента, которая позволяет управлять URL без перезагрузки страницы. Одним из ключевых инструментов при построении SPA (Single Page Application) являются условные переходы, когда направление маршрутизации зависит от состояния приложения или данных пользователя.

Использование page.redirect() для условной навигации

Метод page.redirect(from, to) позволяет перенаправить пользователя с одного маршрута на другой. Его часто применяют для реализации условных переходов:

page('/dashboard', ctx => {
  if (!ctx.user) {
    page.redirect('/login'); // если пользователь не авторизован, отправляем на страницу логина
    return;
  }
  renderDashboard(ctx.user);
});

Здесь ключевой момент — проверка состояния перед отрисовкой. Если условие выполняется, page.redirect изменяет URL и инициирует переход без перезагрузки страницы.

Паттерн “Guard Routes” с промежуточной функцией

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

function requireAuth(ctx, next) {
  if (!ctx.user) {
    page.redirect('/login');
  } else {
    next();
  }
}

page('/profile', requireAuth, ctx => {
  renderProfile(ctx.user);
});
  • ctx содержит текущий контекст маршрута, включая параметры и состояние.
  • next() вызывает следующую функцию в цепочке middleware, если условие пройдено.
  • Такой подход позволяет централизованно управлять авторизацией и другими условиями.

Условные переходы с параметрами маршрута

Page.js поддерживает динамические сегменты URL:

page('/posts/:id', ctx => {
  const postId = ctx.params.id;
  if (!isValidPost(postId)) {
    page.redirect('/404');
    return;
  }
  renderPost(postId);
});

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

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

Обработка условий на основе состояния приложения

Можно строить переходы не только по URL, но и по внутреннему состоянию приложения:

page('/checkout', ctx => {
  if (!cart.hasItems()) {
    page.redirect('/cart'); // если корзина пуста, перенаправляем на страницу корзины
    return;
  }
  renderCheckout(cart);
});

Этот подход особенно полезен для логики шагов в процессе оформления заказа, заполнения форм или авторизации.

Комбинирование нескольких условий

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

page('/admin', ctx => {
  if (!ctx.user) {
    page.redirect('/login');
    return;
  }
  if (!ctx.user.isAdmin) {
    page.redirect('/not-authorized');
    return;
  }
  renderAdminPanel();
});

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

Использование page.exit() для отмены маршрута

Page.js предоставляет метод page.exit(path, callback) для выполнения действий при выходе с определённого маршрута. Его можно использовать для условных переходов, связанных с состоянием страницы:

page('/editor', ctx => {
  renderEditor(ctx.document);
});

page.exit('/editor', ctx => {
  if (ctx.hasUnsavedChanges) {
    if (!confirm('Есть несохранённые изменения. Покинуть страницу?')) {
      page.redirect('/editor'); // отменяем переход
    }
  }
});

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

  • Позволяет реализовать предупреждения при навигации.
  • Поддерживает сложные сценарии отмены перехода на основе состояния компонента или данных формы.

Практические рекомендации

  • Всегда проверять состояние до рендеринга контента. Это предотвращает мигание или некорректную отрисовку страницы.
  • Централизуйте проверки доступа через middleware. Это упрощает сопровождение кода и уменьшает дублирование условий.
  • Используйте page.redirect() вместо ручного изменения window.location. Это сохраняет SPA-поведение без полной перезагрузки страницы.
  • Проверяйте динамические параметры маршрута. Любой параметр может быть некорректным или отсутствовать, что требует перенаправления.

Заключение по структуре условных переходов

Условные переходы в Page.js строятся вокруг проверки состояния, middleware и редиректов. Этот набор инструментов позволяет реализовать сложные сценарии навигации, включая:

  • Авторизацию и контроль доступа
  • Валидацию динамических данных
  • Многоуровневые проверки с разными результатами редиректа
  • Управление переходами при несохранённых данных или изменениях состояния

Эффективная комбинация этих подходов делает маршрутизацию гибкой, безопасной и предсказуемой в современных SPA.

Оглавление