כיצד להפנות משתמש לאחר התחברות ב-React

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

במאמר זה, נבחן כיצד ניתן להפנות משתמש מדף מוגבל לדף התחברות. כמו כן, נדון כיצד תוכל להחזיר את המשתמש לדף שבו היה לאחר הכניסה.

ב-React Router v6, יש שתי דרכים בהן תוכל להשתמש כדי להפנות משתמש - רכיב הניווט וה useNavigate() וו.

צור אפליקציית React

צור אפליקציית React פשוטה באמצעות ליצור-להגיב-אפליקציה פקודה. תשתמש ביישום זה כדי לבדוק כיצד רכיב הניווט וה- useNavigate() עבודת וו.

npx לִיצוֹר-react-app react-redirect

צור דף התחברות

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

צור קובץ חדש ב- src תיקייה ושמות לה Login.js. לאחר מכן הוסף את הקוד הבא, ל ליצור את טופס הכניסה.

יְבוּא { useState } מ "לְהָגִיב";
יְבוּא לוּחַ מַחווָנִים מ "./לוּחַ מַחווָנִים";
const כניסה = () => {





instagram viewer


 const [שם משתמש, שם משתמש] = useState("");
 const [סיסמה, setpassword] = useState("");
const [authenticated, setauthenticated] = useState (localStorage.getItem (localStorage.getItem("authenticated")|| שֶׁקֶר));
 const users = [{ שם משתמש: "ג'יין", סיסמה: "סיסמת בדיקה" }];
const handleSubmit = (e) => {
ה.preventDefault()
const account = users.find((משתמש) => שם משתמש משתמש.שם משתמש);
 אם (חשבון && סיסמת account.password) {
 setauthenticated(נָכוֹן)
 localStorage.setItem("מְאוּמָת", נכון);
 }
 };
לַחֲזוֹר (
<div>
<ע>ברוך שובך</p>
<form onSubmit={handleSubmit}>
<קֶלֶט
 סוג="טֶקסט"
 שם="שם משתמש"
 value={שם משתמש}
 onChange={(e) => setusername (e.target.value)}
 />
<קֶלֶט
 סוג="סיסמה"
 שם="סיסמה"
 onChange={(e) => setpassword (e.target.value)}
 />
<סוג קלט="שלח" ערך="שלח" />
</form>
</div>
 )
};
}
יְצוּאבְּרִירַת מֶחדָל התחברות;

זהו טופס התחברות פשוט. כאשר משתמש שולח את שם המשתמש והסיסמה שלו, הם נבדקים מול המערך. אם הפרטים האלה נכונים, המצב המאומת מוגדר נָכוֹן. מכיוון שתבדוק אם המשתמש מאומת ברכיב Dashboard, עליך גם לאחסן את מצב האימות במקום שניתן לגשת אליו על ידי רכיבים אחרים. מאמר זה משתמש באחסון מקומי. ביישום אמיתי, באמצעות להגיב הקשר תהיה בחירה טובה יותר.

צור דף לוח מחוונים

הוסף את הקוד הבא בקובץ חדש בשם Dashboard.js.

const לוח מחוונים = () => {
לַחֲזוֹר (
<div>
<ע>ברוך הבא ללוח המחוונים שלך</p>
</div>
 );
};
יְצוּאבְּרִירַת מֶחדָל לוּחַ מַחווָנִים;

לוח המחוונים צריך להיות נגיש רק למשתמשים מאומתים בלבד. לכן, כאשר משתמשים מבקרים בדף לוח המחוונים, בדוק תחילה אם הם מאומתים. אם הם לא, הפנה אותם לדף הכניסה.

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

npm להתקין תגובה-נתב-דום

ב-index.js, הגדר את הניתוב עבור האפליקציה שלך.

יְבוּא לְהָגִיב מ "לְהָגִיב";
יְבוּא ReactDOM מ "react-dom/client";
יְבוּא אפליקציה מ "./אפליקציה";
יְבוּא { BrowserRouter, Route, Routes } מ "react-router-dom";
יְבוּא התחברות מ "./התחברות";
יְבוּא לוּחַ מַחווָנִים מ "./לוּחַ מַחווָנִים";
const root = ReactDOM.createRoot(מסמך.getElementById("root"));
שורש.לְדַקלֵם(
<לְהָגִיב. StrictMode>
<נתב דפדפן>
<מסלולים>
<רכיב אינדקס מסלול={<אפליקציה />} />
<נתיב מסלול="התחברות" element={<התחברות />} />
<נתיב מסלול="לוּחַ מַחווָנִים" element={<לוח מחוונים />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);

הגן על דף לוח המחוונים

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

יְבוּא { useEffect, useState } מ "לְהָגִיב";
const לוח מחוונים = () => {
const [authenticated, setauthenticated] = useState(ריק);
 useEffect(() => {
 const logdInUser = localStorage.getItem("מְאוּמָת");
 if (loggedInUser) {
 setauthenticated (loggedInUser);
 }
 }, []);
 if (!מאומת) {
// הפנייה מחדש
 } אַחֵר {
לַחֲזוֹר (
<div>
<ע>ברוך הבא ללוח המחוונים שלך</p>
</div>
 );
 }
};
יְצוּאבְּרִירַת מֶחדָל לוּחַ מַחווָנִים;

הפנה את המשתמש לדף ההתחברות באמצעות ניווט

רכיב הניווט החליף את רכיב ההפניה שהיה בשימוש ב-React Router v5. ייבוא ​​נווט מ-react-router-dom.

יְבוּא { ניווט } מ "react-router-dom";

כדי להפנות מחדש משתמשים לא מאומתים, השתמש בו באופן הבא.

if (!מאומת) {
 לַחֲזוֹר <נווט להחליף אל="/login" />;
} אַחֵר {
לַחֲזוֹר (
<div>
<ע>ברוך הבא ללוח המחוונים שלך</p>
</div>
 );
}

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

הפנה את המשתמש לדף אחר באמצעות useNavigate()

האפשרות האחרת לביצוע הפניות מחדש ב-React היא useNavigate() וו. וו זה מספק גישה ל-API הציווי של ניווט. התחל בייבואו מ-react-router-dom.

יְבוּא { useNavigate } מ "react-router-dom";

הפנה מחדש לאחר שהמשתמש מאומת בהצלחה ב- handleSubmit() מתפקד כך:

const navigate = useNavigate();
const כניסה = () => {
const navigate = useNavigate();
 const [שם משתמש, שם משתמש] = useState("");
 const [סיסמה, setpassword] = useState("");
const [authenticated, setauthenticated] = useState(
 localStorage.getItem (localStorage.getItem("מְאוּמָת") || שֶׁקֶר)
 );
 const users = [{ שם משתמש: "ג'יין", סיסמה: "סיסמת בדיקה" }];
const handleSubmit = (e) => {
ה.preventDefault();
const account = users.find((משתמש) => שם משתמש משתמש.שם משתמש);
 אם (חשבון && סיסמת account.password) {
 localStorage.setItem("מְאוּמָת", נכון);
 לנווט("/dashboard");
 }
 };
לַחֲזוֹר (
<div>
<form onSubmit={handleSubmit}>
<קֶלֶט
 סוג="טֶקסט"
 שם="שם משתמש"
 value={שם משתמש}
 onChange={(e) => setusername (e.target.value)}
 />
<קֶלֶט
 סוג="סיסמה"
 שם="סיסמה"
 onChange={(e) => setpassword (e.target.value)}
 />
<סוג קלט="שלח" ערך="שלח" />
</form>
</div>
 );
};

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

בעת יצירת אפליקציות, אחת המטרות היא להעניק למשתמשים את החוויה הטובה ביותר. אתה יכול לעשות זאת על ידי החזרת המשתמש לדף שבו היה קודם על ידי הפנייתו לדף הכניסה. אתה יכול לעשות זאת על ידי העברת -1 כדי לנווט כך, לנווט (-1). זה פועל באותו אופן כמו לחיצה על כפתור החזרה בדפדפן שלך.

ניתוב ב-React

במאמר זה, למדת כיצד תוכל להפנות משתמש לדף אחר ב-React באמצעות רכיב הניווט והן באמצעות useNavigate() וו. המאמר השתמש בטופס התחברות כדי להדגים כיצד ניתן להפנות משתמשים לא מאומתים מדף מוגן לדף ההתחברות.