𝗔𝗻𝗴𝘂𝗹𝗮𝗿 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀 𝗔𝗿𝗲 𝗡𝗼𝘁 𝗔 𝗚𝗼𝗼𝗱 𝗙𝗶𝘁 𝗙𝗼𝗿 𝗚𝘂𝗮𝗿𝗱𝘀

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