Метод page.redirect()

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

Синтаксис метода:

page.redirect(path, [state]);
  • path – обязательный параметр. Строка, указывающая путь, на который необходимо выполнить перенаправление.
  • state – необязательный параметр. Объект состояния, который будет передан в новый маршрут и доступен через объект ctx.state.

Применение page.redirect() в маршрутах

Метод часто используется внутри обработчиков маршрутов для реализации условий навигации. Например, перенаправление на страницу логина при отсутствии авторизации:

page('/dashboard', ctx => {
    if (!ctx.user) {
        page.redirect('/login');
    } else {
        renderDashboard(ctx);
    }
});

В этом примере:

  • Проверяется наличие пользователя (ctx.user).
  • Если пользователь не авторизован, происходит перенаправление на /login.
  • Если авторизован, вызывается функция рендеринга панели управления.

Отличие page.redirect() от page.show()

Важно понимать разницу между page.redirect() и page.show():

  • page.redirect(): выполняет перенаправление маршрута и формирует новый путь в истории браузера. Старый маршрут не обрабатывается после вызова.
  • page.show(): непосредственно вызывает обработчик маршрута без изменения URL в истории браузера.

Пример разницы:

page('/old', () => {
    console.log('Старый маршрут');
    page.redirect('/new'); // Перенаправление на новый маршрут
});

page('/new', () => {
    console.log('Новый маршрут');
});

Результат: в консоли будет только "Новый маршрут", а URL изменится на /new.

Использование state при перенаправлении

Аргумент state позволяет передавать данные между маршрутами без использования query-параметров:

page('/form', ctx => {
    if (!ctx.user) {
        page.redirect('/login', { reason: 'not_authenticated' });
    }
});

page('/login', ctx => {
    if (ctx.state.reason === 'not_authenticated') {
        showMessage('Необходимо войти в систему');
    }
});

В этом примере объект состояния { reason: 'not_authenticated' } передается из /form в /login, что позволяет обработчику маршрута показать соответствующее сообщение.

Варианты использования

  1. Перенаправление после действия пользователя
document.querySelector('#logoutBtn').addEventListener('click', () => {
    logoutUser();
    page.redirect('/login');
});
  1. Редирект при проверке прав доступа
page('/admin', ctx => {
    if (!ctx.user.isAdmin) {
        page.redirect('/403'); // Страница "Доступ запрещён"
    }
});
  1. Условное перенаправление с передачей состояния
page('/checkout', ctx => {
    if (!ctx.cart.items.length) {
        page.redirect('/shop', { emptyCart: true });
    }
});

Особенности работы с историей браузера

Метод page.redirect() создает новую запись в истории браузера, что позволяет пользователю использовать кнопку «Назад». В отличие от location.replace(), page.redirect() корректно обрабатывается библиотекой Page.js и не вызывает перезагрузку страницы.

Если требуется заменить текущую запись истории вместо создания новой, используется метод page.replace(path, [state]). Он работает аналогично page.redirect(), но текущая запись URL в истории заменяется новым.

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

  • Использовать page.redirect() для перенаправления внутри приложения без полной перезагрузки страницы.
  • Передавать через state важные данные, чтобы не хранить их в query-параметрах.
  • Комбинировать с проверками состояния пользователя, чтобы управлять доступом к маршрутам.
  • Помнить о различии с page.show() и page.replace() при работе с историей браузера.

Пример комплексного сценария

page('/profile', ctx => {
    if (!ctx.user) {
        page.redirect('/login', { from: '/profile' });
        return;
    }
    renderProfile(ctx.user);
});

page('/login', ctx => {
    renderLoginForm();
    if (ctx.state.from) {
        showMessage(`Сначала войдите для доступа к ${ctx.state.from}`);
    }
});

В этом примере реализован полный цикл:

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

Метод page.redirect() является ключевым инструментом для управления навигацией в SPA на Page.js, обеспечивая гибкую маршрутизацию, передачу состояния и контроль доступа к различным частям приложения.

Оглавление