Ресурсы Angular не подходят для гардов

Angular Resources не подходят для Guards

В Angular 22 был представлен стабильный Resource API. Этот инструмент помогает выполнять запросы к API и отслеживать состояния загрузки или ошибки. Он отлично подходит для многих задач.

Однако не используйте его в Guards или Resolvers.

Guards и Resolvers блокируют навигацию. Guard проверяет, может ли пользователь получить доступ к маршруту. Resolver загружает данные перед загрузкой компонента. Оба требуют возврата boolean, Promise или Observable для завершения своей логики.

Resources относятся к Signals API. Signals реактивны. Они не возвращают значения синхронно. Когда вы создаете Resource, значение изначально равно undefined. Затем оно переходит в состояние загрузки.

Посмотрите на эту ошибку:

export const authGuard: CanActivateFn = () => {
  const authResource = httpResource<boolean>(() => ({
    url: '/api/auth/status',
  }));

  return authResource.value() ?? false;
};

Метод .value() немедленно возвращает текущее значение сигнала. Поскольку вызов API занимает время, в самом начале значение будет undefined. Guard видит undefined, интерпретирует его как false и отменяет навигацию. Приложение так и не дожидается ответа от API.

Чтобы исправить это, вам придется преобразовать Resource в Observable. Это добавляет ненужную сложность.

Guards должны представлять собой одно асинхронное событие. Для этого используйте HttpClient с Observables или нативный fetch API с Promises.

Правильный способ:

export const authGuard: CanActivateFn = () => {
  const http = inject(HttpClient);

  return http.get<boolean>('/api/auth/status');
};

Observable сообщает Router, что нужно подождать завершения запроса.

Используйте Resource API в компонентах и сервисах. Он отлично подходит для привязки асинхронных данных к вашим шаблонам. Оставьте Promises и Observables для логики Router.

Source: https://dev.to/geromegrignon/angular-resources-are-not-a-good-fit-for-guards-58j