Angular Interceptors

המאמר הזה מיועד למפתחי Angular. עוד אין לך רקע ב 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 בצורה הבאה:

הקורסים הקרובים

קורס Full Stack

הקורס היחידי בארץ המיועד לבעלי רקע בפיתוח המכשיר אותם ב 14 שבועות לטכנולוגיות ה Web המתקדמות ביותר. הקורס מועבר במתכונת Extreme70 לצבירת נסיון מקסימלי במהלך הקורס...
קורס FULLSTACK

קורס Node.JS

קורס זה הינו הקורס הפרקטי והמתקדם בארץ לפיתוח Web Applications מבוססי Node.JS. Express.JS . למעשה, בקורס זה נכסה את שלושת מארבעת החלקים המרכיבים את ה Full Stack...

קורס Python

Python היא משפות ה Script הפופולאריות ביותר, ובטח הותיקה והעשירה ביותר. נלמד את כל אבני השפה הנפוצה הזאת. נכסה נושאים החל מההתקנה, סוגי נתונים ויצירת משתנים, קלט ופלט, קבלת החלטות וחזרה, איטרטורים, עבודה עם פונקציות ומבני נתונים מתקדמים.

קורס React

React היא ספריית JavaScript לבניית ממשקי משתמש מבית היוצר של Facebook. הספריה מאפשרת למפתחים ליצור יישומי אינטרנט גדולים המשתמשים בנתונים שיכולים להשתנות עם הזמן, מבלי לטעון...

העתיד שלך בהייטק מתחיל כאן
צור איתי קשר עוד היום

דילוג לתוכן