
AuthService) שמרכז את כל העבודה מול ה-Backend ומול Redux, כדי שהקומפוננטות של הטפסים יישארו פשוטות.AuthService ב-TypeScript, ממנה נוצר אובייקט אחד שמיוצא כ-export default. הרעיון כמו אחרי לימוד Redux: משתמשים בסרוויס ולא ב-Redux ישירות מהקומפוננטות.register: פונקציה async שמקבלת UserModel מהטופס, שולחת אותו בבקשת post לכתובת ההרשמה, שולפת את token מ-response.data ועושה dispatch עם register action. אין תמונה, ולכן אפשר לשלוח את המשתמש כמו שהוא, בלי form data.auth/register ו-auth/login. אין כתובת ללוג אאוט, כי השרת עובד עם JWT.login: מועתקת מ-register אך מקבלת CredentialsModel, ממשק חדש שמכיל רק username ו-password. כי לכניסה אין צורך בשם פרטי ובשם משפחה. הפעולה היא login action.logout: עושה רק dispatch של logout action. לא פונים לשרת, כי שרת REST API לא שומר מי מחובר. האחריות על הטוקן היא של ה-Frontend, ומחיקת הטוקן מ-Redux מנתקת את הגישה.subscribe: מקבלת callback שמקבל את AuthState, ומחזירה את ה-unsubscribe של Redux. הקומפוננטה מקבלת רק את AuthState ובוחרת ממנו את המשתמש או הטוקן.post, כי כך מקובל בכל העולם, גם כשהכניסה מחזירה מידע.הטקסט המלא של הדקות הראשונות בהרצאה «יצירת Auth Service» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
אחרי שבנינו את כל מה שצריך ב-Redux מבחינת התשתית של ה-State, בואו כבר בשלב הזה נבנה את ה-Service המתאים עבור כל מה שקשור ל-Authentication. כשאנחנו למדנו על Redux קודם כל הלכנו ובנינו את התשתית, זה בסדר, ואז הלכנו, השתמשנו איתה במהלך הקומפוננטים ואז אמרנו, רגע, זה יותר הגיוני לבנות Service,
אוקיי? אם זה יותר הגיוני לבנות Service, כבר עכשיו נבנה את הסרוויס ואז בהמשך נשתמש עם הסרוויס ולא עם רידאקס בצורה ישירה במהלך הקומפוננטות. עכשיו אנחנו ניגשים לסרוויסים, מוסיפים outService typeScript class outService בואו נייצר מהדבר הזה Object const outService שווה new outService ונחצין
את האובייקט החוצה. אספורט דיפולט אאוט סרוויס כאובג'קט מה אנחנו רוצים בתוך הקלאס שלנו אנחנו רוצים שהקלאס הזאת בעצם תאפשר לנו לעבוד עם רידאקס במקום בצורה ישירה דרך הקלאס ואז יש הרבה פחות קוד שאנחנו צריכים לכתוב בתוך הקומפוננטות אוקיי אז מה בעצם אנחנו רוצים לעשות אז אנחנו רוצים פאבליק אסינק רג'יסטר אנחנו רוצים שתהיה לנו את האפשרות להירשם
החזיר promise void ו-register זאת פונקציה שכנראה טופס הרשמה יקרא לה ויגיד הנה user בוא תשלח אותו לדאטאבייס כולל ל-redux אז אנחנו מקבלים את ה-user לכאן user מודל זה בעצם משהו שהטופס אמור להביא לנו הפורם אמור להביא user מודל ולא בעצמו לשלוח ל-redux או ל-backend אלא להביא לסרוויס לפונקציה הזאת ואנחנו גם
גם שולחים לבקאנד וגם מעדכנים את הרידאקס. אוקיי, מה אנחנו רוצים לעשות בתוך הפונקציה? אנחנו רוצים לקרוא ל-access, אז בואו ניקח ריספונס, await access, מאיזושהי סיבה הוא עוטף לי את זה, פדיחה של ויז'ל סטודיו, העפנו, access.post, גם רג'יסטר וגם לוגין עבור הבקאנד זה תמיד פוסט.
אתם יכולים להגיד, רגע, לוגין, אתה רוצה שהשרת יביא לך מידע בחזרה, אז זה גט, כי כשאתה עושה לוגין אתה אמור לקבל את היוזר אבל רג'יסטר טוב רג'יסטר זה ברור שזה פוסט כי אנחנו מוסיפים משהו כל פעם שאנחנו מוסיפים משהו לדאטאבייס זה פוסט אבל גם לוגין זה נחשב בכל העולם פוסט אם בבק אנד הייתה אפשרות של
לוג אאוט מה שלא קיים בשרתים עבור טכניקת JWT אבל אם השרת היה משתמש באיזושהי טכניקה אחרת עבור לוג אאוט והיינו צריכים לגלוש לשרת בשביל לוג-אאוט, זה גם היה פוסט.
גם לוג-אין, גם לוג-אאוט וגם רג'יסטר, תמיד זה פוסט עבור ה-Backend. זה מקרים מאוד מיוחדים. אז אנחנו רוצים פוסט, ומה השרת מחזיר לנו בחזרה?
השרת מחזיר לנו בחזרה טוקן, טוקן זה סטרינג. לאן אנחנו רוצים לגלוש? קונפיג, לא הקונפיג הנכון, בוא תן לי בבקשה את הקונפיג הנכון.
איפה הקונפיג שלנו? אוי, שאני לא כל כך רואה את זה. למה אני לא רואה את זה? מסתתר לי קונפיג מה זה הקונפיג הזה?
זה לא, לא, לא, אין לי קונפיג. זה פרוסס. זה, מה זה? גם פרוסס. למה הוא לא מראה לי קונפיג?
מי יודע? בואו תעזרו לי קצת פעם אחת. איפה הקונפיג שלנו? זה הקונפיג וזה המשתנה. למה הוא לא מוצא לי אותו קונפיג?
טוב, בסדר, לא קרה כלום. אם אתה לא מוצא לי, אני אקח אותו מפה. הנה, אימפורט, שמתי אותו, תירגע, תביא לי קונפיג. הנה ה-URLs, ואין לנו פה URL מתאים עבור הרשמה ועבור לוגין.
וה-URLים זה אלה, זה ה-URL עבור רג'יסטר, זה ה-URL עבור הלוגין. שימו לב שאין פה URL עבור לוגאוט, כי השרת הזה משתמש בטכניקה שנקראת JWT. וגם אתם יכולים להיכנס לדוקומנטציה של הדבר הזה, ראינו שמתקינים את זה מ-npm אז בדוקומנטציה אפשר לראות בדיוק מה שר"פ מצפה.
אנחנו רוצים לגשת לקונפיגים ואנחנו רוצים להוסיף פה האמת שנוסיף את זה איפה נוסיף את זה יאללה נוסיף את זה בהתחלה רג'יסטר ולוג אין ואנחנו רוצים לבוא ולהגיד לרג'יסטר שהוא טופ בייס משורשר עם אאות רג'יסטר וגם לוג אין או שערים out, log in, ואז יש לנו בדיוק את החבר'ה האלה, עד כאן זה הבייס, מפה out, register, או out, log in,
יש לנו אפשרות ל-URL'ים, ה-URL'ים, אוי, שזה