Angular Resources Guards کے لیے موزوں نہیں ہیں
Angular 22 نے مستحکم Resource API متعارف کروائی ہے۔ یہ ٹول آپ کو APIs کو کوئری کرنے اور لوڈنگ یا ایرر اسٹیٹس کو ٹریک کرنے میں مدد دیتا ہے۔ یہ بہت سے کاموں کے لیے بہترین کام کرتا ہے۔
تاہم، اسے Guards یا Resolvers میں استعمال نہ کریں۔
Guards اور Resolvers نیویگیشن کو روکتے ہیں۔ ایک Guard چیک کرتا ہے کہ آیا صارف کسی روٹ تک رسائی حاصل کر سکتا ہے۔ ایک 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() میتھڈ فوری طور پر موجودہ سگنل ویلیو واپس کرتا ہے۔ چونکہ API کال میں وقت لگتا ہے، اس لیے شروع میں ویلیو undefined ہوتی ہے۔ Guard undefined کو دیکھتا ہے، اسے false سمجھتا ہے، اور نیویگیشن منسوخ کر دیتا ہے۔ ایپ کبھی بھی API کا انتظار نہیں کرتی۔
اسے ٹھیک کرنے کے لیے، آپ کو Resource کو Observable میں تبدیل کرنا ہوگا۔ یہ غیر ضروری پیچیدگی پیدا کرتا ہے۔
Guards کو ایک واحد asynchronous ایونٹ کی نمائندگی کرنے کی ضرورت ہوتی ہے۔ اس کے لیے، Observables کے ساتھ HttpClient یا Promises کے ساتھ native fetch API استعمال کریں۔
صحیح طریقہ:
export const authGuard: CanActivateFn = () => {
const http = inject(HttpClient);
return http.get<boolean>('/api/auth/status');
};
Observable، Router کو بتاتا ہے کہ جب تک درخواست مکمل نہ ہو جائے، انتظار کرے۔
Resource API کو کمپوننٹس اور سروسز کے لیے استعمال کریں۔ یہ آپ کے ٹیمپلیٹس کے ساتھ async ڈیٹا کو بائنڈ کرنے کے لیے بہترین ہے۔ Promises اور Observables کو اپنی Router لاجک کے لیے محفوظ رکھیں۔
Source: https://dev.to/geromegrignon/angular-resources-are-not-a-good-fit-for-guards-58j