שליחת JWT דרך Interceptor - ריאקט
interceptors.ts כותבים פונקציה createInterceptors שלא מחזירה דבר, ומייצאים אותה כ-export default.axios.interceptors.request.use מעבירים פונקציה שמקבלת את ה-request ומחזירה אותו בסוף. כך האינטרספטור פועל על כל הבקשות באפליקציה.AuthService בונים isLoggedIn שמחזירה boolean. היא בודקת אם this.token שונה מ-null. הטוקן ב-Redux הוא null או מחרוזת.request.headers את Authorization עם Bearer והטוקן. אם לא, לא מוסיפים כלום.headers ובסרוויס העובדים לא צריך להתעסק בהדר. קוראים ל-createInterceptors פעם אחת בלבד, ב-index.tsx בעליית התוכנית.פרקי ההרצאה: שליחת JWT דרך Interceptor - ריאקט
תמלול ההרצאה: שליחת JWT דרך Interceptor - ריאקט
הטקסט המלא של הדקות הראשונות בהרצאה «שליחת JWT דרך Interceptor - ריאקט» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אוקיי אז מה בעצם אנחנו רוצים לעשות עכשיו יש כאן איזשהו משהו לא נוח אנחנו שלחנו את הטוקן על ידי הפורמט הנכון כמובן בהדרים אבל רק עבור הריקווסט הזה אז אתם יכולים להגיד בסדר אבל איפה עוד אתה צריך אין לך עוד מקומות שאתה צריך זה נכון אם אין לי עוד מקומות זה בסדר גמור אבל אולי באתר יש כל מיני מקומות שדורשים
את הטוקן הזה בכדי לאשר כניסה. אולי הוספת עובד, מחיקת עובד, עדכון עובד, הצגת כל העובדים, תביא לי את שלושת העובדים הפרודוקטיביים של החודש.
אולי במוצרים, רק אם אני רוצה להוסיף מוצר. בקיצור, הרבה מקומות באתר. אז במקום לגשת לכל אחד מהריקווסטים האלה ולכתוב את זה ולשלוח אותו כאן, אנחנו יכולים פשוט לבנות אינטרספטור מה שלמדנו בעבר כשלמדנו על כל הנושא של ה-Web Request ו-Access.
כאן בנינו פעם אינטרספטור שהתפקיד שלו זה להציג איזשהו לוג על המסך כאשר עושים Request וכאשר עושים Response ונדמה לי שהשתמשנו איתו בעובדים ולאחר מכן גם מחקנו אותו כמו שאני רואה כי כתבנו אותו מחדש בלי האינטרספטור.
זאת אומרת אם היינו רוצים להשתמש בלוגר אינטרספטור אז היינו צריכים כאן לא להשתמש ב-access אלא ב-logger access ואם אני רוצה עוד אינטרספטור אז מה אני אעשה זה קצת מורכב לי אז זה בסדר להשתמש ספציפית ב-logger access אבל זה לא הדבר הכי נוח בואו נראה עוד שיטה להשתמש באינטרספטור שמאפשר לבצע קוד שמתבצע אוטומטית
request או ריספונס עבור כל המופעים של אקשס לא רק עבור שימוש בלדוגמה לוגר אקשס שיצרנו כאן. אז נעזוב רגע את הלוגר אקשס הזה לנפשו ובואו נבנה לעצמנו פה או נבנה כאן interceptors TS איזשהו סרוויס שזה התפקיד שלו בחיים נבנה function create interceptors לא מחזירה שום דבר, ונחצין אותה החוצה.
Export default create interceptors בצורה כזאת. הפונקציה הזאת הולכת להכיל אינטרספטור ששייך ל-access בכבודו ובעצמו ולא למופע כלשהו של אקסס.
אז אנחנו באים ל-access, פעם יש לנו את זה מאיזושהי סיבה, ואנחנו אומרים ל-access interceptors, כלומר אני שם את הפונקציות המיוחדות האלה במופע האמיתי של access ולא create instance.
כאן אני בא ואני רוצה ללכת ל-request בלבד, לקרוא ל-use ולשלוח פונקציה, היא מקבלת את ה-request ומה שהיא עושה זה בודקת קודם כל האם אנחנו מכילים את אותו טוקן, האם יש לנו את הטוקן הזה.
אם יש לי את הטוקן אני רוצה להוסיף header ל-request שמכיל את הטוקן אם אין לי את הטוקן כי לא עשיתי לוגין אין לי מה להוסיף את ההדר הזה. איך אני יודע שיש לי את הטוקן או אין לי?
זה קשור לסרוויס של האוטונטיקיישן הוא זה שמתעסק עם זה. בואו ניגש אליו נבנה פה פונקציה is logged in מחזירה לנו בוליאן מה שאנחנו רוצים לעשות בפונקציה הזאת זה לבדוק האם אנחנו logged in כן או לא.