Angular रिसोर्सेस गार्ड्ससाठी योग्य नाहीत

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

Angular 22 मध्ये स्थिर (stable) Resource API सादर करण्यात आला आहे. हे टूल तुम्हाला APIs क्वेरी करण्यास आणि loading किंवा error states ट्रॅक करण्यास मदत करते. हे अनेक कामांसाठी उत्तम काम करते.

मात्र, त्याचा वापर Guards किंवा Resolvers मध्ये करू नका.

Guards आणि Resolvers नेव्हिगेशन रोखतात. Guard वापरकर्ता एखाद्या route ला ॲक्सेस करू शकतो की नाही हे तपासतो. Resolver कंपोनंट लोड होण्यापूर्वी डेटा मिळवतो (fetch करतो). या दोघांनाही त्यांचे लॉजिक पूर्ण करण्यासाठी boolean, Promise किंवा Observable ची आवश्यकता असते.

Resources हे Signals API चा भाग आहेत. Signals हे reactive असतात. ते synchronous पद्धतीने व्हॅल्यू रिटर्न करत नाहीत. जेव्हा तुम्ही Resource तयार करता, तेव्हा त्याची व्हॅल्यू undefined पासून सुरू होते. त्यानंतर ती loading state मध्ये जाते.

ही चूक पहा:

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

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

.value() मेथड सध्याची signal value त्वरित रिटर्न करते. API कॉलला वेळ लागत असल्यामुळे, सुरुवातीला व्हॅल्यू undefined असते. Guard ला undefined दिसते, तो त्याला false मानतो आणि नेव्हिगेशन रद्द करतो. ॲप API साठी कधीच थांबत नाही.

हे सुधारण्यासाठी, तुम्हाला Resource चे Observable मध्ये रूपांतर करावे लागेल. यामुळे अनावश्यक गुंतागुंत (complexity) वाढते.

Guards ने एका सिंगल asynchronous इव्हेंटचे प्रतिनिधित्व करणे आवश्यक आहे. यासाठी, Observables सह HttpClient किंवा Promises सह नेटिव्ह fetch API वापरा.

योग्य पद्धत:

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

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

Observable Router ला विनंती (request) पूर्ण होईपर्यंत थांबण्यास सांगते.

Components आणि services साठी Resource API वापरा. तुमच्या templates ला async डेटा बाइंड करण्यासाठी ते उत्तम आहे. Promises आणि Observables तुमच्या Router लॉजिकसाठी राखून ठेवा.

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