المسارات المحمية هي تلك المسارات التي تمنح حق الوصول للمستخدمين المصرح لهم فقط. هذا يعني أنه يجب على المستخدمين أولاً استيفاء شروط معينة قبل الوصول إلى هذا المسار المحدد. على سبيل المثال ، يمكن أن يتطلب تطبيقك أن يتمكن المستخدمون المسجلون فقط من زيارة صفحة لوحة المعلومات.
في هذا البرنامج التعليمي ، ستتعلم كيفية إنشاء مسارات محمية في تطبيق React.
لاحظ أنك ستستخدم React Router v6 ، والذي يختلف قليلاً عن الإصدارات السابقة.
ابدء
للبدء ، استخدم إنشاء رد فعل التطبيق لتشغيل تطبيق React بسيط.
npx create-response-app protect-روتيس-رد فعلانتقل إلى المجلد الذي تم إنشاؤه للتو وابدأ التطبيق الخاص بك.
القرص المضغوط حماية المسارات رد فعل
بدء npmافتح مجلد التطبيق باستخدام محرر النصوص المفضل لديك وقم بتنظيفه. لك app.js يجب أن تبدو هكذا.
وظيفة التطبيق () {
إرجاع ;
}
تصدير التطبيق الافتراضي ؛أنت الآن جاهز لإعداد المسارات.
متعلق ب: كيفية إنشاء أول تطبيق تفاعل باستخدام JavaScript
إعداد جهاز توجيه React
ستستخدم React Router لإعداد التنقل لتطبيقك.
ثبت رد فعل جهاز التوجيه دوم.
تثبيت npm-router-domبالنسبة لهذا التطبيق ، سيكون لديك ثلاث صفحات رئيسية:
- الصفحة الرئيسية (الصفحة المقصودة).
- صفحة الملف الشخصي (محمية ، لذلك يمكن فقط للمستخدمين المسجلين الدخول).
- حول الصفحة (عامة حتى يتمكن أي شخص من الوصول إليها).
في Navbar.js، استخدم ال وصلة مكون من رد فعل جهاز التوجيه دوم لإنشاء روابط التنقل إلى مسارات مختلفة.
const {Link} = تتطلب ("response-router-dom") ؛
const Navbar = () => {
إرجاع (
);
};
تصدير Navbar الافتراضي ؛في app.js إنشاء المسارات المطابقة للروابط في قائمة التنقل.
استيراد {BrowserRouter as Router، Routes، Route} من "response-router-dom" ؛
استيراد Navbar من "./Navbar" ؛
استيراد الصفحة الرئيسية من "./Home" ؛
استيراد ملف التعريف من ". / الملف الشخصي" ؛
استيراد حول من ". / حول" ؛
وظيفة التطبيق () {
إرجاع (
} />
} />
} />
);
}
تصدير التطبيق الافتراضي ؛أنت الآن بحاجة إلى إنشاء المكونات التي أشرت إليها أص.
في Home.js:
الصفحة الرئيسية const = () => {
إرجاع الصفحة الرئيسية
;
};
تصدير الصفحة الرئيسية الافتراضية ؛في Profile.js
ملف تعريف const = () => {
إرجاع الصفحة الشخصية
;
};
تصدير ملف التعريف الافتراضي ؛في About.js
كونست حول = () => {
إرجاع حول الصفحة
;
};
تصدير افتراضي حول ؛إنشاء مسارات محمية في React
التالي هو إنشاء طرق محمية. ال الصفحة الرئيسية و حول المسارات عامة بمعنى أنه يمكن لأي شخص الوصول إليها ، لكن مسار الملف الشخصي يتطلب مصادقة المستخدمين أولاً. لذلك ، تحتاج إلى إنشاء طريقة لتسجيل دخول المستخدمين.
إعداد مصادقة وهمية
نظرًا لأن هذا ليس برنامجًا تعليميًا للمصادقة ، فستستخدم React خطاف useState لمحاكاة نظام تسجيل الدخول.
في أص، أضف ما يلي.
استيراد {Routes، Route، BrowserRouter} من "response-router-dom" ؛
استيراد {useState} من "رد فعل" ؛
// عبارات استيراد أخرى
وظيفة التطبيق () {
const [isLoggedIn، setisLoggedIn] = useState (خالية) ؛
const تسجيل الدخول = () => {
setisLoggedIn (صواب) ،
};
const logOut = () => {
setisLoggedIn (خطأ) ،
};
إرجاع (
{isLoggedIn؟ (
): (
)}
);
}
تصدير التطبيق الافتراضي ؛هنا ، أنت تقوم بتتبع حالة تسجيل الدخول للمستخدم باستخدام الحالة. لديك زران ، زر تسجيل الدخول وزر الخروج. يتم عرض هذه الأزرار بدورها بناءً على ما إذا كان المستخدم قد قام بتسجيل الدخول أم لا.
إذا تم تسجيل خروج المستخدم ، فسيتم عرض زر تسجيل الدخول. سيؤدي النقر فوقه إلى تشغيل وظيفة تسجيل الدخول التي ستقوم بتحديث ملف isLoggedIn الحالة إلى "صواب" وبدورها يتم العرض من تسجيل الدخول إلى زر تسجيل الخروج.
متعلق ب: ما هي مصادقة المستخدم وكيف تعمل؟
حماية المكونات الخاصة
لحماية المسارات ، يجب أن تتمتع المكونات الخاصة أيضًا بإمكانية الوصول إلى ملف isLoggedIn القيمة. يمكنك القيام بذلك عن طريق إنشاء مكون جديد يقبل ملف isLoggedIn الدولة كدعم والمكون الخاص كطفل.
على سبيل المثال ، إذا كان المكون الجديد الخاص بك يسمى "محمي" ، فيمكنك عرض مكون خاص مثل هذا.
سيتحقق المكون المحمي مما إذا كان isLoggedIn صواب أم خطأ. إذا كان هذا صحيحًا ، فسيتم إعادة المكون الخاص. إذا كان الخطأ خاطئًا ، فسيتم إعادة توجيه المستخدم إلى صفحة يمكنهم من خلالها تسجيل الدخول.
تعرف على المزيد حول الطرق الأخرى التي يمكنك استخدامها لعرض أحد المكونات وفقًا للشروط الواردة في هذه المقالة بتاريخ التصيير الشرطي في React.
في التطبيق الخاص بك ، قم بإنشاء محمي. js.
استيراد {تنقل} من "رد فعل جهاز التوجيه-dom" ؛
const محمية = ({isLoggedIn، children}) => {
إذا (! isLoggedIn) {
إرجاع ;
}
عودة الأطفال
};
التصدير المحمي الافتراضي ؛في هذا المكون ، يتم استخدام عبارة if للتحقق مما إذا كان المستخدم قد تمت مصادقته أم لا. إذا لم يكونوا كذلك ، التنقل من رد فعل جهاز التوجيه دوم يعيد توجيههم إلى الصفحة الرئيسية. ومع ذلك ، إذا تمت مصادقة المستخدم ، فسيتم تقديم المكون الفرعي.
يستخدم محمي. js في أص تعديل حساب تعريفي طريق الصفحة.
المسار = "/ الملف الشخصي"
العنصر = {
}
/>App.js يجب أن تبدو هكذا.
استيراد {Routes، Route، BrowserRouter} من "response-router-dom" ؛
استيراد {useState} من "رد فعل" ؛
استيراد Navbar من "./Navbar" ؛
الاستيراد المحمي من ". / محمي" ؛
استيراد الصفحة الرئيسية من "./Home" ؛
استيراد حول من ". / حول" ؛
استيراد ملف التعريف من ". / الملف الشخصي" ؛
وظيفة التطبيق () {
const [isLoggedIn، setisLoggedIn] = useState (خالية) ؛
const تسجيل الدخول = () => {
setisLoggedIn (صواب) ،
};
const logOut = () => {
setisLoggedIn (خطأ) ،
};
إرجاع (
{isLoggedIn؟ (
): (
)}
} />
العنصر = {
}
/>
} />
);
}
تصدير التطبيق الافتراضي ؛هذا كل شيء عن إنشاء طرق محمية. يمكنك الآن الوصول إلى صفحة الملف الشخصي فقط إذا قمت بتسجيل الدخول. إذا حاولت الانتقال إلى صفحة الملف الشخصي دون تسجيل الدخول ، فسيتم إعادة توجيهك إلى الصفحة الرئيسية.
التحكم في الوصول المستند إلى الدور
أوضح لك هذا البرنامج التعليمي كيف يمكنك تقييد المستخدمين غير المصادق عليهم من الوصول إلى صفحة في تطبيق React. في بعض الحالات ، قد تحتاج إلى الذهاب إلى أبعد من ذلك وتقييد المستخدمين بناءً على أدوارهم. على سبيل المثال ، يمكن أن يكون لديك صفحة تعرض صفحة تحليلات تمنح فقط حق الوصول إلى المسؤولين. هنا ، ستحتاج إلى إضافة منطق في المكون المحمي الذي يتحقق مما إذا كان المستخدم يفي بالشروط المطلوبة.
يعد العرض الشرطي طريقة مفيدة لتحسين تطبيقك. فيما يلي مجموعة مختارة من طرق استخدامه.
اقرأ التالي
- برمجة
- حماية
- برمجة
- تتفاعل
- نصائح أمنية
ماري جاثوني هي مطورة برمجيات لديها شغف بإنشاء محتوى تقني ليس إعلاميًا فحسب ، بل جذابًا أيضًا. عندما لا تقوم بالبرمجة أو الكتابة ، فإنها تستمتع بالتسكع مع الأصدقاء والتواجد في الهواء الطلق.
اشترك في نشرتنا الإخبارية
انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!
انقر هنا للاشتراك
