הגנה על אתר עם שם וסיסמה בריאקט - Blocking Component
componentDidMount שמביא את העובדים, בודקים !authService.isLoggedIn().useHistory שייך לקומפוננטות פונקציה. בקומפוננטת מחלקה מגדירים בממשק ה-props שדה history מסוג History (מתוך החבילה history), ואז קוראים ל-this.props.history.push לדף הכניסה.return חובה: אחרי הניתוב חייבים return. בלי זה הקוד ממשיך ומנסה לפנות לשרת.isLoggedIn לא עבדה: הטוקן ב-Redux היה צריך להיות null גם בהתחלה ולא רק אחרי לוג אאוט. אחרי תיקון ההגדרה, דיבוג עם alert הצביע על הבעיה והוסר.פרקי ההרצאה: הגנה על אתר עם שם וסיסמה בריאקט - Blocking Component
תמלול ההרצאה: הגנה על אתר עם שם וסיסמה בריאקט - Blocking Component
הטקסט המלא של הדקות הראשונות בהרצאה «הגנה על אתר עם שם וסיסמה בריאקט - Blocking Component» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.
הדבר הבא שאנחנו רוצים לעשות ולהוסיף כאן זה את המניעה של היוזר מלהגיע לקומפוננטה שדורשת לוקדאין אם הוא עדיין לא לוקדאין. מה הכוונה?
בוא נלך רגע להום, נערף ראש, יצאתי מלוקדאין, הלכתי למוצרים, אין לי בעיה להיכנס לקומפוננטה של המוצרים כי אני בעצם יכול להביא אותם גם אם אני לא לוקדאין.
הלכתי לאמפלואיז, הופה, יש פה בעיה. אני בכלל לא רוצה לראות את הקומפוננטה הזאת מאחורי הקלעים. זה בסדר לראות הודעת שגיאה, לא זאת, כמובן, הודעה הרבה יותר הגיונית, אבל זה משהו שהוא בסדר לראות את ההודעת שגיאה, אבל אני לא רוצה להגיע לפה.
מה בדיוק אני אמור לראות עכשיו? טבלה ריקה? למה הוא מראה לי את הטבלה הזאת? הדבר הנכון לעשות זה או לא לגשת בכלל, או להפנות לדף הלוגין, וכמובן להציג הודעה מתאימה.
את זה אנחנו רוצים למנוע. במילים אחרות אם היוזר אין לו הרשאה להיכנס לקומפוננטה, לא לתת לו להיכנס לקומפוננטה. איפה אנחנו עושים את זה?
אז אנחנו רוצים לשלב את זה בקומפוננטה המתאימה. אין פה איזה טריק שיכול להקל עלינו מבחינת כל הקומפוננטות, אלא כל קומפוננטה אנחנו צריכים להסתכל האם הוא יכול להיכנס אליה עם לוגדין, כן או לא, ואם אין לו לוגדין הכוונה.
ואם אני נמצא כרגע ב-class employee list, אז אני רואה שיש לי פה את הקומפוננט דידמאונט שאוטומטית הולך לשרת ומנסה להביא לי את העובדים וכמובן מנסה להציג פה אבל רגע אל תנסה לעשות כלום אם היוזר לא לוגדין אחרת הוא יראה טבלה ריקה הוא יראה משהו שהוא לא אמור לראות אנחנו רוצים כאן לבצע את הקוד הבא אם היוזר לא לוגדין היה לנו outservice.isloggedin
אנחנו רוצים לבדוק אם הוא לא אז אני שם פה סימן קריאה אם היוזר לא לוגדין מה אנחנו רוצים לעשות? אנחנו רוצים להציג לו הודעה הרבה יותר הגיונית.
לדוגמה, You are not logged in or please log in to see this list or משהו. Good. מה עכשיו אנחנו רוצים לעשות?
אנחנו רוצים לנתב למקום אחר. אני לא רוצה להישאר בקומפוננטה הזאת, אסור לי לראות אותה בכלל, כי אני לא לוגדין. איך אנחנו מנתבים? אם הייתי ב-functional component אז הייתי משתמש ב-react hook useHistory.
בגלל שאני ב-Class Component, אני צריך להשתמש בטכניקה שמתאימה ל-Class Component. בואו נשים את הטכניקה הזאת. זה בעצם מצב שבו אנחנו רוצים שיהיה לנו Interface Employee List Props, אנחנו צריכים לשלב את זה ב-Props.
אנחנו צריכים להביא משהו שנקרא היסטורי, From היסטורי, שימו לב אותיות קטנות גדולות. כאן אנחנו רוצים היסטורי מסוג היסטורי, זה קצת מבלבל, כי זה אותי אותנות, זה גדולות, כאילו, מתחיל באותנה, זה מתחיל באותדולה, זה אותדולה, זה אותנה, אוקיי, קצת מבלבל, אבל אני בטוח שאתם תסתדרו עם זה.
אנחנו רוצים לומר שזה הפרופס שלנו, אז נשים אותו פה.