Angular રિસોર્સિસ ગાર્ડ્સ માટે યોગ્ય નથી

𝗔𝗻𝗴𝘂𝗹𝗮𝗿 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀 Guards માટે યોગ્ય નથી

Angular 22 એ સ્ટેબલ Resource API રજૂ કરી છે. આ ટૂલ તમને APIs ક્વેરી કરવામાં અને લોડિંગ અથવા એરર સ્ટેટ્સને ટ્રેક કરવામાં મદદ કરે છે. તે ઘણા કાર્યો માટે સારી રીતે કામ કરે છે.

જોકે, તેનો ઉપયોગ Guards અથવા Resolvers માં કરશો નહીં.

Guards અને Resolvers નેવિગેશનને બ્લોક કરે છે. Guard તપાસે છે કે વપરાશકર્તા રૂટ (route) એક્સેસ કરી શકે છે કે નહીં. Resolver કમ્પોનન્ટ લોડ થાય તે પહેલાં ડેટા ફેચ કરે છે. બંનેને તેમની લોજિક પૂર્ણ કરવા માટે boolean, Promise અથવા Observable ની જરૂર હોય છે.

Resources એ Signals API નો ભાગ છે. Signals રિએક્ટિવ (reactive) હોય છે. તેઓ સિંક્રનસલી (synchronously) વેલ્યુ રિટર્ન કરતા નથી. જ્યારે તમે Resource બનાવો છો, ત્યારે તેની વેલ્યુ undefined થી શરૂ થાય છે. ત્યારબાદ તે લોડિંગ સ્ટેટમાં જાય છે.

આ ભૂલ જુઓ:

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

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

.value() મેથડ તરત જ વર્તમાન signal વેલ્યુ રિટર્ન કરે છે. API કોલ લેવામાં સમય લેતો હોવાથી, શરૂઆતમાં વેલ્યુ undefined હોય છે. Guard undefined જુએ છે, તેને false તરીકે ગણે છે, અને નેવિગેશન કેન્સલ કરી દે છે. એપ ક્યારેય API ની રાહ જોતી નથી.

આને સુધારવા માટે, તમારે Resource ને Observable માં રૂપાંતરિત કરવું પડશે. આનાથી બિનજરૂરી જટિલતા વધે છે.

Guards એ એક સિંગલ asynchronous ઇવેન્ટનું પ્રતિનિધિત્વ કરવા જોઈએ. આ માટે, Observables સાથે HttpClient અથવા Promises સાથે નેટિવ fetch API નો ઉપયોગ કરો.

સાચી રીત:

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

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

Observable Router ને જણાવે છે કે જ્યાં સુધી રિક્વેસ્ટ પૂર્ણ ન થાય ત્યાં સુધી રાહ જુઓ.

Components અને services માટે Resource API નો ઉપયોગ કરો. તે તમારા templates માં async ડેટા બાઈન્ડ કરવા માટે ઉત્તમ છે. Promises અને Observables ને તમારા Router લોજિક માટે સાચવી રાખો.

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