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

𝗔𝗻𝗴𝘂𝗹𝗮𝗿 𝗥𝗲𝘀𝗼𝘂𝗿𝗰𝗲𝘀 ಗಳು Guards ಗೆ ಸೂಕ್ತವಲ್ಲ

Angular 22 ಸ್ಥಿರವಾದ Resource API ಅನ್ನು ಪರಿಚಯಿಸಿತು. ಈ ಸಾಧನವು API ಗಳನ್ನು ಕ್ವೇರಿ ಮಾಡಲು ಮತ್ತು ಲೋಡಿಂಗ್ ಅಥವಾ ಎರರ್ ಸ್ಟೇಟ್‌ಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಇದು ಅನೇಕ ಕಾರ್ಯಗಳಿಗೆ ಚೆನ್ನಾಗಿ ಕೆಲಸ ಮಾಡುತ್ತದೆ.

ಆದಾಗ್ಯೂ, ಇದನ್ನು Guards ಅಥವಾ Resolvers ನಲ್ಲಿ ಬಳಸಬೇಡಿ.

Guards ಮತ್ತು Resolvers ನ್ಯಾವಿಗೇಷನ್ ಅನ್ನು ತಡೆಯುತ್ತವೆ. ಒಂದು Guard ಬಳಕೆದಾರರು ರೂಟ್ ಅನ್ನು ಪ್ರವೇಶಿಸಬಹುದೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ. ಒಂದು Resolver ಕಾಂಪೊನೆಂಟ್ ಲೋಡ್ ಆಗುವ ಮೊದಲು ಡೇಟಾವನ್ನು ಪಡೆಯುತ್ತದೆ. ಇವೆರಡೂ ತಮ್ಮ ಲಾಜಿಕ್ ಅನ್ನು ಪೂರ್ಣಗೊಳಿಸಲು boolean, Promise ಅಥವಾ Observable ಅನ್ನು ಬಯಸುತ್ತವೆ.

Resources ಎಂಬುದು Signals API ಗೆ ಸೇರಿವೆ. Signals ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕವಾಗಿವೆ (reactive). ಅವು ಮೌಲ್ಯಗಳನ್ನು synchronously ಹಿಂತಿರುಗಿಸುವುದಿಲ್ಲ. ನೀವು Resource ಅನ್ನು ರಚಿಸಿದಾಗ, ಮೌಲ್ಯವು undefined ಆಗಿ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ. ನಂತರ ಅದು loading ಸ್ಥಿತಿಗೆ ಹೋಗುತ್ತದೆ.

ಈ ತಪ್ಪನ್ನು ಗಮನಿಸಿ:

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 ನೊಂದಿಗೆ native 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