Проверка авторизации

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

Основные подходы к проверке авторизации

  1. Глобальная проверка перед переходом на маршрут Navigo предоставляет возможность перехватывать переход на маршрут с помощью функции-обработчика. Для этого используется метод before:
const router = new Navigo('/');

router.before((done, params, route) => {
  const isAuthenticated = Boolean(localStorage.getItem('authToken'));
  if (!isAuthenticated && route.name === 'private') {
    router.navigate('/login');
  } else {
    done();
  }
});
  • done — функция, вызываемая для продолжения маршрутизации.
  • route — объект текущего маршрута, содержащий имя, путь и параметры.
  • Этот подход позволяет централизованно проверять авторизацию для всех защищённых маршрутов.
  1. Проверка авторизации внутри конкретного маршрута Иногда проверка выполняется только для отдельных маршрутов, особенно если не требуется глобальный контроль. Используется функция-обработчик маршрута:
router.on('/dashboard', () => {
  const isAuthenticated = Boolean(localStorage.getItem('authToken'));
  if (!isAuthenticated) {
    router.navigate('/login');
    return;
  }
  renderDashboard();
}, { name: 'dashboard' });
  • renderDashboard() — функция, отвечающая за отрисовку защищённого контента.
  • Такой подход удобен для маршрутов, которые имеют уникальные правила доступа.

Использование меток маршрутов для управления доступом

Navigo позволяет задавать имена маршрутов через опцию name. Это упрощает проверку и делает код более читаемым:

router.on('/profile', () => {
  renderProfile();
}, { name: 'profile' });

const protectedRoutes = ['dashboard', 'profile'];

router.before((done, params, route) => {
  const isAuthenticated = Boolean(localStorage.getItem('authToken'));
  if (!isAuthenticated && protectedRoutes.includes(route.name)) {
    router.navigate('/login');
  } else {
    done();
  }
});
  • Список protectedRoutes содержит маршруты, доступ к которым ограничен.
  • Такая организация облегчает расширение и поддержку системы авторизации.

Асинхронная проверка авторизации

Иногда состояние авторизации определяется не локально, а через API. В Navigo можно использовать асинхронные проверки перед переходом на маршрут:

router.before(async (done, params, route) => {
  const isAuthenticated = await checkAuthFromServer();
  if (!isAuthenticated && route.name === 'private') {
    router.navigate('/login');
  } else {
    done();
  }
});

async function checkAuthFromServer() {
  const response = await fetch('/api/check-auth', { credentials: 'include' });
  const result = await response.json();
  return result.authenticated;
}
  • done() вызывается только после завершения асинхронной операции.
  • Позволяет интегрировать проверку с серверной логикой без блокировки интерфейса.

Комбинирование с динамическими маршрутами

Навигация часто использует динамические параметры, например /users/:id. Проверка авторизации при этом может зависеть не только от глобального состояния, но и от конкретного ресурса:

router.on('/users/:id', ({ data }) => {
  const userId = data.id;
  const currentUserId = getCurrentUserId();

  if (!currentUserId || currentUserId !== userId) {
    router.navigate('/unauthorized');
    return;
  }
  renderUserProfile(userId);
}, { name: 'userProfile' });
  • data содержит динамические параметры маршрута.
  • Позволяет реализовать разграничение доступа на уровне отдельных сущностей.

Рекомендации по организации авторизации

  • Всегда использовать именованные маршруты, чтобы проверка доступа была читаемой и расширяемой.
  • Для глобальной проверки авторизации лучше использовать router.before, чтобы исключить дублирование кода.
  • Асинхронные проверки следует выполнять с учётом UX — показывать индикатор загрузки при ожидании ответа сервера.
  • Для динамических маршрутов проверка может учитывать параметры URL, идентификаторы пользователей или роли.

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

Оглавление