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

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

שים לב שאתה תשתמש ב-React Router v6, שהוא קצת שונה מהגירסאות הקודמות.

מתחילים

כדי להתחיל, השתמש אפליקציה ליצור-להגיב לאתחל אפליקציית React פשוטה.

npx create-react-app protect-routes-react

נווט אל התיקיה שנוצרה זה עתה והפעל את היישום שלך.

cd protect-routes-react
התחלה של npm

פתח את תיקיית היישום שלך עם עורך הטקסט המועדף עליך ונקה אותה. שֶׁלְךָ app.js צריך להיראות כך.

function App() {
 לַחֲזוֹר ;
}
ייצוא אפליקציית ברירת מחדל;

כעת אתה מוכן להגדיר את המסלולים.

קָשׁוּר: כיצד ליצור את אפליקציית React הראשונה שלך עם JavaScript

הגדרת נתב React

אתה תשתמש ב-React Router כדי להגדיר את הניווט עבור האפליקציה שלך.

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

npm להתקין react-router-dom

עבור יישום זה, יהיו לך שלושה דפים עיקריים:

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

ב Navbar.js, להשתמש ב קישור רכיב מ תגובה-נתב-דום כדי ליצור קישורי ניווט לנתיבים שונים.

const { קישור } = require("react-router-dom");
const Navbar = () => {
 לחזור (

 );
};
ייצוא ברירת מחדל Navbar;

ב app.js צור את המסלולים התואמים לקישורים בתפריט הניווט.

לייבא את { BrowserRouter כנתב, מסלולים, מסלול } מ-"react-router-dom";
ייבוא ​​Navbar מ-"./Navbar";
לייבא את הבית מ-"./Home";
ייבוא ​​פרופיל מ-"./Profile";
ייבוא ​​אודות מ-"./About";
function App() {
 לחזור (



} />
} />
} />


 );
}
ייצוא אפליקציית ברירת מחדל;

כעת עליך ליצור את הרכיבים שבהם התייחסת אpp.js.

ב Home.js:

const Home = () => {
 לַחֲזוֹר 
דף הבית
;
};
ייצוא ברירת מחדל בית;

ב Profile.js

const Profile = () => {
 לַחֲזוֹר 
עמוד פרופיל
;
};
ייצוא פרופיל ברירת מחדל;

ב About.js

const אודות = () => {
 לַחֲזוֹר 
עמוד אודות
;
};
ברירת המחדל של ייצוא אודות;

יצירת מסלולים מוגנים ב-React

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

הגדרת אימות מזויף

מכיוון שלא מדובר במדריך אימות, תשתמש ב-React useState hook לדמות מערכת כניסה.

ב אpp.js, הוסף את הדברים הבאים.

לייבא { Routes, Route, BrowserRouter } מ-"react-router-dom";
ייבוא ​​{ useState } מ-"react";
// בולי יבוא אחרים
function App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (true);
 };
 const logOut = () => {
 setisLoggedIn (שקר);
 };
 לחזור (


 {הוא מחובר? (
להתנתק
 ): (
התחברות
 )}



 );
}
ייצוא אפליקציית ברירת מחדל;

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

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

קָשׁוּר: מהו אימות משתמש וכיצד זה עובד?

הגנה על רכיבים פרטיים

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

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

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

למד עוד על דרכים אחרות שבהן תוכל להשתמש לעיבוד רכיב בהתאם לתנאים ממאמר זה ואילך עיבוד מותנה ב-React.

ביישום שלך, צור Protected.js.

ייבוא ​​{ ניווט } מ-"react-router-dom";
const Protected = ({ isLoggedIn, ילדים }) => {
 if (!isLoggedIn) {
 לַחֲזוֹר ;
 }
 החזרת ילדים;
};
ייצוא ברירת מחדל מוגן;

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

להשתמש Protected.js ב אpp.js לשנות את פּרוֹפִיל מסלול עמוד.

 path="/profile"
 element={



 }
/>

App.js צריך להיראות כך.

לייבא { Routes, Route, BrowserRouter } מ-"react-router-dom";
ייבוא ​​{ useState } מ-"react";
ייבוא ​​Navbar מ-"./Navbar";
ייבוא ​​מוגן מ-"./Protected";
לייבא את הבית מ-"./Home";
ייבוא ​​אודות מ-"./About";
ייבוא ​​פרופיל מ-"./Profile";
function App() {
 const [isLoggedIn, setisLoggedIn] = useState (null);
 const logIn = () => {
 setisLoggedIn (true);
 };
 const logOut = () => {
 setisLoggedIn (שקר);
 };
 לחזור (




 {הוא מחובר? (
להתנתק
 ): (
התחברות
 )}

} />
 element={



 }
 />
} />





 );
}
ייצוא אפליקציית ברירת מחדל;

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

בקרת גישה מבוססת תפקידים

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

כיצד ליישם עיבוד מותנה ב-React.js (עם דוגמאות)

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

קרא הבא

על הסופר