HttpInterceptor ಜೊತೆಗೆ ಕೋನೀಯದಲ್ಲಿ JWT ರಿಫ್ರೆಶ್ ಟೋಕನ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಅನ್ನು ಪರಿಹರಿಸುವುದು

ಕೋನೀಯ ಪ್ರತಿಬಂಧಕಗಳಲ್ಲಿ ತಡೆರಹಿತ JWT ರಿಫ್ರೆಶ್ ಅನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು

ಸುರಕ್ಷಿತ ಬಳಕೆದಾರ ಅವಧಿಗಳನ್ನು ಹೊಂದಿರುವ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ನಲ್ಲಿ, ಅಲ್ಪಾವಧಿಯ JWT ಟೋಕನ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು ಅಡೆತಡೆಯಿಲ್ಲದ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕಾಗಿ ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಟೋಕನ್‌ಗಳ ಅವಧಿ ಮುಗಿದಾಗ, ಬಳಕೆದಾರರು ಮರು-ಲಾಗಿನ್ ಮಾಡಲು ಒತ್ತಾಯಿಸುವಂತಹ ಸಮಸ್ಯೆಗಳನ್ನು ಎದುರಿಸುತ್ತಾರೆ, ಇದು ನಿರಾಶಾದಾಯಕವಾಗಿರುತ್ತದೆ ಮತ್ತು ಬಳಕೆದಾರರ ನಿಶ್ಚಿತಾರ್ಥವನ್ನು ಅಡ್ಡಿಪಡಿಸುತ್ತದೆ. ಇದನ್ನು ನಿಭಾಯಿಸಲು, ಡೆವಲಪರ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಸ್ವಯಂಚಾಲಿತ ಟೋಕನ್ ರಿಫ್ರೆಶ್ ಅವಧಿ ಮುಗಿದ ಸೆಷನ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಕೋನೀಯ ಇಂಟರ್‌ಸೆಪ್ಟರ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು ಕಾರ್ಯಗತಗೊಳಿಸುತ್ತಾರೆ. 🕰️

ಈ ವಿಧಾನವು HTTP ವಿನಂತಿಗಳನ್ನು ಪ್ರತಿಬಂಧಿಸುವುದು, 401 ದೋಷಗಳನ್ನು ಹಿಡಿಯುವುದು (ಅನಧಿಕೃತ ವಿನಂತಿಗಳು), ಮತ್ತು ನಂತರ ಹೊಸ ಟೋಕನ್ ಪಡೆಯಲು ರಿಫ್ರೆಶ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಮರುಪ್ರಯತ್ನಿಸಿದ ವಿನಂತಿಗಳಿಗೆ ನವೀಕರಿಸಿದ ಟೋಕನ್ ಅಥವಾ ಕುಕೀಯನ್ನು ಅನ್ವಯಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವಲ್ಲಿ ಸಮಸ್ಯೆಗಳು ಉಂಟಾಗಬಹುದು. ಹೊಸ ಟೋಕನ್ ಸರಿಯಾಗಿ ಪ್ರಚಾರ ಮಾಡದಿದ್ದರೆ, ಮರುಪ್ರಯತ್ನವು ವಿಫಲವಾಗಬಹುದು, ಬಳಕೆದಾರರಿಗೆ ಅದೇ ದೃಢೀಕರಣ ದೋಷವನ್ನು ಉಂಟುಮಾಡುತ್ತದೆ ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್ ವರ್ಕ್‌ಫ್ಲೋಗಳನ್ನು ಸಂಭಾವ್ಯವಾಗಿ ಅಡ್ಡಿಪಡಿಸುತ್ತದೆ.

ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ, ನಾವು ಈ ಇಂಟರ್ಸೆಪ್ಟರ್ ಪ್ಯಾಟರ್ನ್ ನ ಪ್ರಾಯೋಗಿಕ ಅನುಷ್ಠಾನದ ಮೂಲಕ ನಡೆಯುತ್ತೇವೆ. ದೋಷಗಳನ್ನು ಹೇಗೆ ಹಿಡಿಯುವುದು, ಟೋಕನ್‌ಗಳನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡುವುದು ಮತ್ತು ವಿನಂತಿಗಳನ್ನು ಮಾನ್ಯವಾದ ದೃಢೀಕರಣದೊಂದಿಗೆ ಮರುಪ್ರಯತ್ನಿಸುವುದು ಹೇಗೆ ಎಂಬುದನ್ನು ನಾವು ನೋಡುತ್ತೇವೆ. ಅಧಿವೇಶನ ನವೀಕರಣ ಪ್ರಕ್ರಿಯೆಯ ಮೇಲೆ ನಿಮಗೆ ನಿಯಂತ್ರಣವನ್ನು ನೀಡುವಾಗ ಈ ವಿಧಾನವು ಅಡಚಣೆಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.

ಅಂತ್ಯದ ವೇಳೆಗೆ, Http ಮಾತ್ರ ಕುಕೀಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು ಮತ್ತು ಹೆಚ್ಚಿನ ವಿನಂತಿಯ ಸಂಪುಟಗಳಲ್ಲಿ ರಿಫ್ರೆಶ್ ಅನುಕ್ರಮಗಳನ್ನು ನಿರ್ವಹಿಸುವಂತಹ ಸಾಮಾನ್ಯ ಅಪಾಯಗಳನ್ನು ಹೇಗೆ ಪರಿಹರಿಸುವುದು ಎಂಬುದರ ಕುರಿತು ನೀವು ಒಳನೋಟಗಳನ್ನು ಪಡೆಯುತ್ತೀರಿ. ನಿರಂತರ ಲಾಗಿನ್‌ಗಳಿಲ್ಲದೆಯೇ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಸುರಕ್ಷಿತ, ಸುಗಮ ಬಳಕೆದಾರ ಸೆಶನ್ ಅನ್ನು ನಿರ್ವಹಿಸಬಹುದೆಂದು ಈ ವಿಧಾನವು ಖಚಿತಪಡಿಸುತ್ತದೆ. 🔒

ಕೋನೀಯ ಪ್ರತಿಬಂಧಕಗಳೊಂದಿಗೆ ವಿಶ್ವಾಸಾರ್ಹ JWT ದೃಢೀಕರಣವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು

ಮೇಲಿನ ಉದಾಹರಣೆಯಲ್ಲಿ, 401 ದೋಷ ಎದುರಾದಾಗಲೆಲ್ಲಾ ಅಲ್ಪಾವಧಿಯ JWT ಟೋಕನ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ರಿಫ್ರೆಶ್ ಮಾಡಲು ಇಂಟರ್‌ಸೆಪ್ಟರ್ ಅನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ. ಸೆನ್ಸಿಟಿವ್ ಡೇಟಾ ಹೊಂದಿರುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಈ ರೀತಿಯ ಸೆಟಪ್ ಅತ್ಯಗತ್ಯವಾಗಿರುತ್ತದೆ, ಅಲ್ಲಿ ಸೆಷನ್ ಸುರಕ್ಷತೆಯನ್ನು ನಿರ್ವಹಿಸುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ, ಆದರೆ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಅಡ್ಡಿಪಡಿಸಬಾರದು. ಇಂಟರ್ಸೆಪ್ಟರ್ 401 (ಅನಧಿಕೃತ) ದೋಷವನ್ನು ಹಿಡಿಯುತ್ತದೆ ಮತ್ತು ಬಳಕೆದಾರರು ಮರು-ದೃಢೀಕರಿಸುವ ಅಗತ್ಯವಿಲ್ಲದೇ ಸೆಷನ್ ಅನ್ನು ನವೀಕರಿಸಲು ರಿಫ್ರೆಶ್ ಟೋಕನ್ ವಿನಂತಿಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ. ಈ ಪ್ರಕ್ರಿಯೆಯು ಕ್ಯಾಚ್‌ಎರರ್ ಕಾರ್ಯದಿಂದ ಪ್ರಚೋದಿಸಲ್ಪಟ್ಟಿದೆ, ಇದು ಗಮನಿಸಬಹುದಾದ ಪೈಪ್‌ಲೈನ್‌ನಲ್ಲಿ ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಅನುಮತಿಸುತ್ತದೆ. ಇಲ್ಲಿ, ಯಾವುದೇ HTTP ದೋಷ, ನಿರ್ದಿಷ್ಟವಾಗಿ 401, ಟೋಕನ್ ಅವಧಿ ಮೀರಿದೆ ಎಂದು ಸಂಕೇತಿಸುತ್ತದೆ ಮತ್ತು ರಿಫ್ರೆಶ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ಪ್ರಾರಂಭಿಸುತ್ತದೆ.

switchMap ಕಾರ್ಯವು ಇಲ್ಲಿ ಮತ್ತೊಂದು ಪ್ರಮುಖ ಅಂಶವಾಗಿದೆ; ರಿಫ್ರೆಶ್ ಮಾಡಿದ ವಿನಂತಿಗಾಗಿ ಇದು ಹೊಸ ಗಮನಿಸಬಹುದಾದ ಸ್ಟ್ರೀಮ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ, ಸಂಪೂರ್ಣ ಹರಿವನ್ನು ರದ್ದುಗೊಳಿಸದೆಯೇ ಹಳೆಯ ವೀಕ್ಷಣೆಯನ್ನು ಬದಲಾಯಿಸುತ್ತದೆ. ರಿಫ್ರೆಶ್ ಮಾಡಿದ ನಂತರ, ಅದು ಮೂಲ ವಿನಂತಿಯನ್ನು ಮರುಪ್ರಯತ್ನಿಸುತ್ತದೆ, ಹೊಸ ಟೋಕನ್ ಅನ್ನು ಅನ್ವಯಿಸಲಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಹಳೆಯ ಅವಲೋಕನದಿಂದ ಹೊಸದಕ್ಕೆ ಬದಲಾಯಿಸುವ ಮೂಲಕ, ಪ್ರತಿಬಂಧಕವು ಟೋಕನ್ ನವೀಕರಣವನ್ನು ತಡೆರಹಿತ, ತಡೆರಹಿತ ರೀತಿಯಲ್ಲಿ ನಿರ್ವಹಿಸಬಹುದು. ನೈಜ-ಸಮಯದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ ಈ ತಂತ್ರವು ವಿಶೇಷವಾಗಿ ಮೌಲ್ಯಯುತವಾಗಿದೆ, ಏಕೆಂದರೆ ಇದು ಸುರಕ್ಷಿತ ದೃಢೀಕರಣವನ್ನು ನಿರ್ವಹಿಸುವಾಗ ಬಳಕೆದಾರರ ಸಂವಹನದಲ್ಲಿನ ಅಡಚಣೆಗಳನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಸುರಕ್ಷಿತ ಹಣಕಾಸು ಡ್ಯಾಶ್‌ಬೋರ್ಡ್ ಅನ್ನು ಬ್ರೌಸ್ ಮಾಡುವ ಬಳಕೆದಾರರನ್ನು ಮರುನಿರ್ದೇಶಿಸಲಾಗುವುದಿಲ್ಲ ಅಥವಾ ಅನಗತ್ಯವಾಗಿ ಲಾಗ್ ಔಟ್ ಮಾಡಲಾಗುವುದಿಲ್ಲ; ಬದಲಾಗಿ, ಹೊಸ ಟೋಕನ್ ಅನ್ನು ಸ್ವಾಧೀನಪಡಿಸಿಕೊಳ್ಳಲಾಗುತ್ತದೆ ಮತ್ತು ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ. 🔄

ಹೆಚ್ಚುವರಿಯಾಗಿ, ರಿಫ್ರೆಶ್ ಪ್ರಕ್ರಿಯೆಯ ಸ್ಥಿತಿಯನ್ನು ನಿರ್ವಹಿಸುವ ಮೂಲಕ ಬಿಹೇವಿಯರ್ ಸಬ್ಜೆಕ್ಟ್ ನಿರ್ಣಾಯಕ ಪಾತ್ರವನ್ನು ವಹಿಸುತ್ತದೆ. ಈ RxJS ಉಪಯುಕ್ತತೆಯು ಕೊನೆಯದಾಗಿ ಹೊರಸೂಸಲ್ಪಟ್ಟ ಮೌಲ್ಯವನ್ನು ಉಳಿಸಿಕೊಳ್ಳಬಹುದು, ಬಹು ವಿನಂತಿಗಳು ಒಂದೇ ಸಮಯದಲ್ಲಿ 401 ದೋಷವನ್ನು ಎದುರಿಸಿದಾಗ ಇದು ವಿಶೇಷವಾಗಿ ಸಹಾಯಕವಾಗಿರುತ್ತದೆ. ಬಹು ರಿಫ್ರೆಶ್‌ಗಳನ್ನು ಪ್ರಚೋದಿಸುವ ಬದಲು, ಇಂಟರ್‌ಸೆಪ್ಟರ್ ಒಂದು ಟೋಕನ್ ರಿಫ್ರೆಶ್ ಅನ್ನು ಮಾತ್ರ ಪ್ರಾರಂಭಿಸುತ್ತದೆ ಮತ್ತು ಈ ಒಂದೇ ಟೋಕನ್ ನವೀಕರಣಕ್ಕಾಗಿ ಕಾಯಲು ಎಲ್ಲಾ ಇತರ ವಿನಂತಿಗಳನ್ನು ಸರದಿಯಲ್ಲಿ ಇರಿಸಲಾಗುತ್ತದೆ. ಸ್ವಿಚ್‌ಮ್ಯಾಪ್‌ನೊಂದಿಗೆ BehaviorSubject ಅನ್ನು ಬಳಸುವುದರಿಂದ ಒಂದು ವಿನಂತಿಯು ರಿಫ್ರೆಶ್ ಅನ್ನು ಪ್ರಚೋದಿಸಿದರೆ, ಹೊಸ ಟೋಕನ್‌ನ ಅಗತ್ಯವಿರುವ ಎಲ್ಲಾ ಇತರ ವಿನಂತಿಗಳು ಪುನರಾವರ್ತಿತ ರಿಫ್ರೆಶ್ ಕರೆಗಳನ್ನು ಉಂಟುಮಾಡದೆ ನವೀಕರಿಸಿದ ರುಜುವಾತುಗಳನ್ನು ಬಳಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಬಳಕೆದಾರರು ಬಹು ತೆರೆದ ಟ್ಯಾಬ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ಸಂದರ್ಭಗಳಲ್ಲಿ ಅಥವಾ ಅಪ್ಲಿಕೇಶನ್ ಹಲವಾರು ಏಕಕಾಲಿಕ ನೆಟ್‌ವರ್ಕ್ ಕರೆಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತಿರುವ ಸಂದರ್ಭಗಳಲ್ಲಿ ಈ ವೈಶಿಷ್ಟ್ಯವು ಅತ್ಯಂತ ಸಹಾಯಕವಾಗಿದೆ, ಹೀಗಾಗಿ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಉಳಿಸುತ್ತದೆ ಮತ್ತು ಅತಿಯಾದ ಸರ್ವರ್ ಲೋಡ್ ಅನ್ನು ತಪ್ಪಿಸುತ್ತದೆ.

ಈ ಪ್ರತಿಬಂಧಕ ತರ್ಕವನ್ನು ಪರೀಕ್ಷಿಸುವುದು ವಿಭಿನ್ನ ಸನ್ನಿವೇಶಗಳ ಅಡಿಯಲ್ಲಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸಹ ಅತ್ಯಗತ್ಯವಾಗಿರುತ್ತದೆ, ಅದಕ್ಕಾಗಿಯೇ ನಾವು HttpTestingController ಅನ್ನು ಸೇರಿಸುತ್ತೇವೆ. ಈ ಕೋನೀಯ ಪರೀಕ್ಷಾ ಸಾಧನವು ನಿಯಂತ್ರಿತ ಪರಿಸರದಲ್ಲಿ 401 ಅನಧಿಕೃತ ಸ್ಥಿತಿಯಂತಹ HTTP ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಅನುಕರಿಸಲು ಮತ್ತು ಪರೀಕ್ಷಿಸಲು ನಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. HttpTestingController ಒದಗಿಸಿದ ಒಂದು ವಿಧಾನವಾದ ಫ್ಲಶ್ ಅನ್ನು ಬಳಸಿಕೊಂಡು, ಡೆವಲಪರ್‌ಗಳು ನೈಜ-ಪ್ರಪಂಚದ ದೋಷ ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಅನುಕರಿಸಬಹುದು ಮತ್ತು ಇಂಟರ್‌ಸೆಪ್ಟರ್ ನಿರೀಕ್ಷೆಯಂತೆ ವರ್ತಿಸುತ್ತದೆ ಎಂದು ಪರಿಶೀಲಿಸಬಹುದು. ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿಯೋಜಿಸುವ ಮೊದಲು ರಿಫ್ರೆಶ್ ಲಾಜಿಕ್ ವಿವಿಧ ಪ್ರಕರಣಗಳನ್ನು ಎಷ್ಟು ಚೆನ್ನಾಗಿ ನಿಭಾಯಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಪರಿಷ್ಕರಿಸಲು ಈ ಪರೀಕ್ಷಾ ವಿಧಾನವು ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಈ ವಿಧಾನಗಳೊಂದಿಗೆ, ಇಂಟರ್ಸೆಪ್ಟರ್ ಸೆಷನ್ ಅನ್ನು ಸುರಕ್ಷಿತವಾಗಿ ಸಂರಕ್ಷಿಸುತ್ತದೆ ಆದರೆ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವ ಬಳಕೆದಾರರಿಗೆ ಹೆಚ್ಚು ತಡೆರಹಿತ, ಸ್ಥಿರ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತದೆ. 👩‍💻

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpErrorResponse } from '@angular/common/http';
import { catchError, switchMap } from 'rxjs/operators';
import { Observable, throwError, BehaviorSubject } from 'rxjs';
import { AuthService } from './auth.service';
import { Router } from '@angular/router';
@Injectable()
export class JwtInterceptor implements HttpInterceptor {
  private refreshTokenInProgress$ = new BehaviorSubject<boolean>(false);
  constructor(private authService: AuthService, private router: Router) {}
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({ withCredentials: true });
    return next.handle(req).pipe(
      catchError((error: HttpErrorResponse) => {
        if (error.status === 401) {
          return this.handle401Error(req, next);
        }
        return throwError(() => error);
      })
    );
  }
  private handle401Error(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (!this.refreshTokenInProgress$.getValue()) {
      this.refreshTokenInProgress$.next(true);
      return this.authService.refreshToken().pipe(
        switchMap(() => {
          this.refreshTokenInProgress$.next(false);
          return next.handle(req.clone({ withCredentials: true }));
        }),
        catchError((error) => {
          this.refreshTokenInProgress$.next(false);
          this.authService.logout();
          this.router.navigate(['/login'], { queryParams: { returnUrl: req.url } });
          return throwError(() => error);
        })
      );
    }
    return this.refreshTokenInProgress$.pipe(
      switchMap(() => next.handle(req.clone({ withCredentials: true })))
    );
  }
}

import { TestBed } from '@angular/core/testing';
import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
import { JwtInterceptor } from './jwt.interceptor';
import { HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
import { AuthService } from './auth.service';
describe('JwtInterceptor', () => {
  let httpMock: HttpTestingController;
  let authServiceSpy: jasmine.SpyObj<AuthService>;
  let httpClient: HttpClient;
  beforeEach(() => {
    authServiceSpy = jasmine.createSpyObj('AuthService', ['refreshToken', 'logout']);
    TestBed.configureTestingModule({
      imports: [HttpClientTestingModule],
      providers: [
        JwtInterceptor,
        { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
        { provide: AuthService, useValue: authServiceSpy }
      ]
    });
    httpMock = TestBed.inject(HttpTestingController);
    httpClient = TestBed.inject(HttpClient);
  });
  afterEach(() => {
    httpMock.verify();
  });
  it('should refresh token on 401 error and retry request', () => {
    authServiceSpy.refreshToken.and.returnValue(of(true));
    httpClient.get('/test').subscribe();
    const req = httpMock.expectOne('/test');
    req.flush(null, { status: 401, statusText: 'Unauthorized' });
    expect(authServiceSpy.refreshToken).toHaveBeenCalled();
  });
});

ಕೋನೀಯ ಪ್ರತಿಬಂಧಕಗಳೊಂದಿಗೆ JWT ಟೋಕನ್ ರಿಫ್ರೆಶ್ ತಂತ್ರಗಳನ್ನು ವಿಸ್ತರಿಸುವುದು

ಕೋನೀಯವನ್ನು ಬಳಸುವ ಒಂದು ನಿರ್ಣಾಯಕ ಅಂಶ JWT ಟೋಕನ್ ಇಂಟರ್ಸೆಪ್ಟರ್ ಸುರಕ್ಷಿತ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಿಗಾಗಿ ದೃಢೀಕರಣ ಮತ್ತು ಅವಧಿ ಮುಕ್ತಾಯವನ್ನು ನಿರ್ವಹಿಸುವ ಸಂಕೀರ್ಣತೆಗಳನ್ನು ಸಮರ್ಥವಾಗಿ ನಿರ್ವಹಿಸುತ್ತಿದೆ. ಕೇವಲ 401 ದೋಷಗಳು ಮತ್ತು ರಿಫ್ರೆಶ್ ಟೋಕನ್‌ಗಳನ್ನು ಹಿಡಿಯುವುದರ ಹೊರತಾಗಿ, ಬಹು-ವಿನಂತಿ ನಿರ್ವಹಣೆ ಮತ್ತು ಟೋಕನ್ ರಿಫ್ರೆಶ್‌ಗಳನ್ನು ಹೇಗೆ ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು ಎಂಬುದರ ಕುರಿತು ಯೋಚಿಸುವುದು ಅತ್ಯಗತ್ಯ. ಬಹು ವಿನಂತಿಗಳು ಏಕಕಾಲದಲ್ಲಿ 401 ದೋಷವನ್ನು ಎದುರಿಸಿದಾಗ, ಸರತಿ ಅಥವಾ ಲಾಕಿಂಗ್ ಕಾರ್ಯವಿಧಾನವನ್ನು ಅಳವಡಿಸುವುದು ಒಂದು ಸಮಯದಲ್ಲಿ ಕೇವಲ ಒಂದು ಟೋಕನ್ ರಿಫ್ರೆಶ್ ಆಗುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಅತ್ಯಂತ ಉಪಯುಕ್ತವಾಗಿದೆ. ಈ ವಿಧಾನವು ಅನಗತ್ಯ API ಕರೆಗಳನ್ನು ತಡೆಯುತ್ತದೆ ಮತ್ತು ಲೋಡ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಹೆಚ್ಚಿನ ದಟ್ಟಣೆಯ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ, ಎಲ್ಲಾ ಸರದಿಯಲ್ಲಿರುವ ವಿನಂತಿಗಳನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡಿದ ನಂತರ ಮುಂದುವರೆಯಲು ಅನುಮತಿಸುತ್ತದೆ.

ಟೋಕನ್ ಸಂಗ್ರಹಣೆ ಮತ್ತು ಹಿಂಪಡೆಯುವಿಕೆಯನ್ನು ನಾವು ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತೇವೆ ಎಂಬುದನ್ನು ಸ್ಟ್ರೀಮ್‌ಲೈನ್ ಮಾಡಲು ಕೋನೀಯ ಇಂಟರ್‌ಸೆಪ್ಟರ್‌ಗಳು ನಮಗೆ ಅವಕಾಶ ಮಾಡಿಕೊಡುತ್ತವೆ. ಸ್ಥಳೀಯ ಸಂಗ್ರಹಣೆಯಲ್ಲಿ ಟೋಕನ್‌ಗಳನ್ನು ಹಾರ್ಡ್‌ಕೋಡಿಂಗ್ ಮಾಡುವ ಬದಲು, ಕೋನೀಯವನ್ನು ಬಳಸುವುದು ಉತ್ತಮ Http ಮಾತ್ರ ಕುಕೀಸ್ ಮತ್ತು ಭದ್ರತೆಯನ್ನು ಹೆಚ್ಚಿಸಲು CSRF ರಕ್ಷಣೆ. HttpOnly ಕುಕೀಗಳೊಂದಿಗೆ, JWT ಅನ್ನು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಿಂದ ಪ್ರವೇಶಿಸಲಾಗುವುದಿಲ್ಲ ಅಥವಾ ಕುಶಲತೆಯಿಂದ ನಿರ್ವಹಿಸಲಾಗುವುದಿಲ್ಲ, ಸುರಕ್ಷತೆಯನ್ನು ಹೆಚ್ಚು ಸುಧಾರಿಸುತ್ತದೆ ಆದರೆ ಹೊಸ ಸವಾಲನ್ನು ಸೇರಿಸುತ್ತದೆ: ವಿನಂತಿಗಳು ರಿಫ್ರೆಶ್ ಮಾಡಿದ ಕುಕೀಯನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ತೆಗೆದುಕೊಳ್ಳುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು. ಕೋನೀಯ ಅಂತರ್ನಿರ್ಮಿತ withCredentials ಆಯ್ಕೆಯು ಒಂದು ಪರಿಹಾರವಾಗಿದೆ, ಪ್ರತಿ ವಿನಂತಿಯಲ್ಲಿ ಈ ಕುಕೀಗಳನ್ನು ಸೇರಿಸಲು ಬ್ರೌಸರ್‌ಗೆ ಸೂಚನೆ ನೀಡುತ್ತದೆ.

ಉತ್ಪಾದನಾ ಪರಿಸರದಲ್ಲಿ, ಟೋಕನ್ ರಿಫ್ರೆಶ್‌ಗಳೊಂದಿಗೆ ಲೋಡ್‌ನಲ್ಲಿ ಅಪ್ಲಿಕೇಶನ್ ಹೇಗೆ ವರ್ತಿಸುತ್ತದೆ ಎಂಬುದರ ಕುರಿತು ಕಾರ್ಯಕ್ಷಮತೆ ಪರೀಕ್ಷೆಗಳನ್ನು ನಡೆಸುವುದು ಸೂಕ್ತವಾಗಿದೆ. ಪರೀಕ್ಷೆಯ ಸೆಟಪ್‌ಗಳು ಹೆಚ್ಚಿನ ವಿನಂತಿಯ ಪರಿಮಾಣಗಳನ್ನು ಅನುಕರಿಸಬಹುದು, ಇಂಟರ್‌ಸೆಪ್ಟರ್‌ನ ಲಾಜಿಕ್ ಮಾಪಕಗಳು ಪರಿಣಾಮಕಾರಿಯಾಗಿರುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ. ಪ್ರಾಯೋಗಿಕವಾಗಿ, ಈ ಸೆಟಪ್ ಬಳಕೆದಾರರ ಅನುಭವದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವ ಟೋಕನ್-ಸಂಬಂಧಿತ ದೋಷಗಳ ಅಪಾಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. ಇಂಟರ್ಸೆಪ್ಟರ್ ತಂತ್ರವು ಸರಿಯಾದ ಕುಕೀ ನಿರ್ವಹಣೆ ಮತ್ತು ಪರೀಕ್ಷೆಯೊಂದಿಗೆ ಜೋಡಿಸಿದಾಗ, ತಡೆರಹಿತ, ಬಳಕೆದಾರ ಸ್ನೇಹಿ ಮತ್ತು ಸುರಕ್ಷಿತ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ-ಅಪ್ಲಿಕೇಶನ್ ನಿರ್ಣಾಯಕ ಹಣಕಾಸಿನ ಡೇಟಾವನ್ನು ಅಥವಾ ಸಾಮಾಜಿಕ ವೇದಿಕೆಯ ಬಳಕೆದಾರರ ಅವಧಿಗಳನ್ನು ನಿರ್ವಹಿಸುತ್ತಿರಲಿ. 🌐🔐