המאמר הזה מיועד למפתחי Angular. עוד אין לך רקע ב Angular? לחץ על הכפתור לקבלת פרטים על הקורס הקרוב.
אני מזמין אותך להצטרף לקבוצת הידע ולקבל עדכונים על תכנים חדשים, סרטוני הדרכה, Webinars טכנולוגיים ו Meetups קרובים.
אני מדריך הרבה מפתחי Angular (בדרך כלל בקורסים מתקדמים) ואני בכל פעם מחדש מתפלא שרובם לא שמעו על המושג הזה כלל. יותר מזה, רובם ככולם שולחים בקשות Http לשרת דרך ה HttpClient ובכל פעם מסתבכים בתיעוד הבקשות האלה, בדיקת תקינות המידע הנשלח, ואיך זה קשור לנושא הAuthentication. במאמר זה אני אשפוך אור על המושג, מה הוא נותן לנו ואיך מטמיעים אותו נכון באפליקציה מבוססת Angular.
מה זה Angular Interceptor?
השם הרשמי של ה Feature הזה, שהפציע לעולם בגרסת 4.3 הוא HttpIterceptor והוא חלק מאוסף כלים שסופקו כחלק מהרחבת וניהול יכולות בקשות ה Http מהשרת באפליקציה.
הרעיון הוא פשוט אך יעיל ביותר: לספק ״שכבה אפליקטיבית״ (בדומה ל Middleware באפליקציה מבוססת Express) בה יעברו כל בקשות ה Http לשרת.
כך, אנו יכולים לוודא שכל בקשת Http לשרת עוברת מניפולציה מסוימת או מספקת פונקציונליות מסוימת, לדוגמה: נניח שהיינו רוצים שכל בקשות ה Http יתועדו ב Log מיוחד – היינו בונים Interceptor שמעדכן את הלוג בזמן הבקשה, ה Client ששלח אותה, הכתובת של הבקשה וכו׳.
דוגמה נוספת: נניח שהיינו רוצים לבצע סוג של Data Shaping של מידע שנשלח בבקשת Post. כך, יכולנו להסיר את האחריות מהמפתח ״לטייב״ את המידע לפני ששולח אותו. הוא פשוט ישלח את המידע בצורה רגילה, והמידע יעבור את העיבוד המתאים ע״י ה Angular Interceptor.
דוגמה נוספת לשימוש (וכנראה הכי שכיח) זה כל נושא ה Authentication. כשאנו שולחים בקשה לשרת הדורש Token, עלינו לדאוג לשלוח את ה Token עם כל בקשה. זהו מקרה קלאסי בו ה Angular Interceptor יכול לעזור לנו ולעשות זאת בשבילנו, כך שעם כל בקשה, ה Token יצורף אוטומטית ויישלח את השרת.
יצירת והטמעת Angular Interceptor
בואו נראה דוגמה ליצירת Interceptor לשימוש הנפוץ ביותר באפליקציות Angular והטמעתו אצלנו באפליקציה: נכתוב Interceptor המקבל את ה Token מ Service ייעודי, מצר, אותו לבקשה ומעביר אותו הלאה. נקודה חשובה : אני לא הולך עכשיו להסביר כיצד יוצרים Token מבוסס JWT (נושא למאמר אחר). אני אדגים כיצד בהינתן JWT Token מסוים, הוא מצורף לבקשת היוצאת אל השרת כך שהמשתמש יוכל לקבל את השירות במגבלת ההרשאות.
כדי ליצור Interceptor עלינו ליצור Injectable Class שמממשת את ה HttpInterceptor. זה נראה כך:
מה שקורה כאן הוא:
ה Class שלנו חייב לממש את הפנוקציה intercept שמצידה מקבלת 2 פרמטרים:
1. Req – כל המידע שהגיע עם ה Request (ייתכן שהגיע מתוך ה Component, מתוך Service או אפילו מ Interceptor אחר!)
2. Next – ה HttpHandler בעזרתו אנו מעבירים את הבקשה הלאה (לאחר שצורף לה ה Token).
כשמגיעה בקשת הHttp, הפונקציה מקבלת את ה Token מ Service נפרד, משכפלת את ה request (כדי להוסיף את ה headers המתאימים) ומעבירה את זה הלאה ע״י ה “next”. מכאן, הבקשה נשלחת או לשרת או ל Interceptor הבא (במידה ויש לנו כמה באפליקציה. כל אחת מוסיפה את הנדבך שלה).
כדי שכל הסיפור הזה יעבוד, עלינו להוסיף את הרכיבים הנכונים ב app.module בצורה הבאה:
