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

𝗔𝗻𝗴𝘂𝗹𝗮𝗿 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀 𝗦𝗶 𝗖𝗵𝗮𝗴𝘂𝗼 𝗕𝗼𝗿𝗮 Kwa 𝗚𝘂𝗮𝗿𝗱𝘀

Angular 22 ilianzisha Resource API thabiti. Chombo hiki kinakusaidia kufanya query kwenye API na kufuatilia hali ya kupakia (loading) au makosa (error). Kinafanya kazi vizuri kwa kazi nyingi.

Hata hivyo, usikitumie kwenye Guards au Resolvers.

Guards na Resolvers huzuia navigation. Guard hukagua ikiwa mtumiaji anaweza kufikia route fulani. Resolver huvuta data kabla ya component kupakia. Zote mbili zinahitaji boolean, Promise, au Observable ili kukamilisha mantiki yake.

Resources ni sehemu ya Signals API. Signals ni reactive. Hazirudishi thamani (values) kwa njia ya synchronous. Unapounda Resource, thamani huanza ikiwa undefined. Kisha inahamia kwenye hali ya kupakia (loading state).

Angalia kosa hili:

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

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

Njia ya .value() hurudisha thamani ya sasa ya signal mara moja. Kwa sababu mwito wa API huchukua muda, thamani huwa undefined mwanzoni. Guard huona undefined, inaichukulia kama false, na kufuta navigation. Programu haisubiri API kamwe.

Ili kurekebisha hili, lazima ubadilishe Resource kuwa Observable. Hii inaongeza utata usio wa lazima.

Guards zinahitaji kuwakilisha tukio moja la asynchronous. Kwa ajili hiyo, tumia HttpClient pamoja na Observables au native fetch API pamoja na Promises.

Njia sahihi:

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

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

Observable huambia Router isubiri hadi request ikamilike.

Tumia Resource API kwa ajili ya components na services. Ni nzuri kwa kuunganisha (binding) data za async kwenye templates zako. Weka akiba ya Promises na Observables kwa ajili ya mantiki yako ya Router.

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