في هذا الدرس 6تصفّح المواضيع
تضيف دالة navigate("/dashboard") افتراضياً مدخلاً جديداً فوق سجل التصفح. لكن بعد إتمام تسجيل الدخول أو الدفع بنجاح، لا يصح أن يعيد زر الرجوع المستخدم إلى شاشة الدخول المنتهية! لذلك نمرر الخيار { replace: true } لاستبدال مدخل الدخول في السجل، كما يمكن تمرير عدد نسبي مثل navigate(-1) للعودة خطوة واحدة للخلف.
بينما تعمل دالة useNavigate() داخل معالجات الأحداث، يمثل مكون <Navigate to="/courses" replace /> البديل التصريحي الجاهز لإعادة التوجيه تلقائياً بمجرد رسمه في JSX؛ مثل تحويل الروابط القديمة إلى المسار الجديد أو حجب صفحة أثناء التصيير. احرص دائماً على إضافة خاصية replace مع التحويلات التصريحية حتى لا يعلق زر الرجوع في حلقة تحويل لا نهائية.
عندما يكتب الزائر عنواناً خاطئاً لا يطابق أي مسار معرّف، ستظهر شاشة فارغة ما لم تضف مسار التقاط شامل بنجمة (path="*") مثل <Route path="*" element={<NotFoundPage />} />. ولأن النجمة تمتلك أدنى درجة أولوية في خوارزمية المطابقة، فإنها لا تعمل إلا بعد فشل كافة المسارات الصريحة والديناميكية، فتعرض صفحة 404 واضحة مع رابط عودة للرئيسية.
بدمج منفذ التخطيط <Outlet /> مع useLocation() و<Navigate replace /> نحصل على نمط حارس المسارات القياسي ProtectedRoute: نضع كافة صفحات الأعضاء داخل مسار أب واحد يتحقق من جلسة المستخدم؛ فإذا لم يكن مسجلاً يحوّله إلى /login مع حفظ وجهته الأصلية في state={{ from: location.pathname }} لإعادته إليها فور تسجيل الدخول!
function ProtectedRoute({ user }) {
const loc = useLocation();
if (!user) {
return (
<Navigate
to="/login" replace
state={{ from: loc.pathname }}
/>
);
}
return <Outlet />;
}القاعدة الذهبية لأمن تطبيقات الويب: كل شفرة تُرسل ضمن حزمة React تعمل داخل متصفح الزائر نفسه حيث يمكن فحص الحالة أو تعديلها من أدوات المطورين. لذا فإن حارس ProtectedRoute هو أداة لتنظيم تجربة المستخدم في الواجهة فقط، أما الحماية الأمنية الفعلية للبيانات والعمليات الحساسة فيجب فرضها إلزامياً على الخادم الخلفي بالتحقق من الهوية والصلاحيات في كل طلب API وإرجاع رمزي 401 أو 403 عند الرفض، مع عدم تضمين أي مفاتيح سرية داخل حزمة المتصفح. يجمع الجدول الختامي أدوات الدرس:
| أداة التوجيه أو الحماية | توقيت التفعيل الأساسي | القاعدة الهندسية والأمنية |
|---|---|---|
useNavigate() | داخل دوال إرسال النماذج والعمليات البرمجية | مرر خيار { replace: true } بعد الدخول أو الدفع |
<Navigate replace /> | تحويل تصريحي مباشر أثناء رسم المكون | أضف خاصية replace دائماً لمنع فخ زر الرجوع |
<Route path="*" /> | عند فشل مطابقة جميع المسارات المعرّفة | اعرض شاشة 404 واضحة مع رابط عودة آمن للرئيسية |
ProtectedRoute وأمان الخادم | حماية فروع صفحات الأعضاء ولوحات التحكم | ينظم الحارس الواجهة فقط ويفرض الخادم الصلاحيات الفعلية |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس الختامي التوجيه البرمجي بخطاف useNavigate وخيار replace، والتحويل التصريحي بمكون Navigate، ومعالجة العناوين غير الموجودة بمسار النجمة 404، وبناء حارس المسارات المحمية مع ترسيخ قاعدة التحقق الأمني الإلزامي على الخادم. الخطوة التالية: تهانينا بإتمام جميع دروس منهج ReactJS الحديث البالغ عددها 51 درساً! ابدأ الآن بتوظيف هذه المهارات المتكاملة في بناء تطبيقات صفحة واحدة احترافية ومتكاملة.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 useNavigate خطاف التوجيه البرمجي
- خطاف يعيد دالة برمجية للانتقال بين المسارات أو الرجوع بالسجل عقب تنفيذ الأحداث والنماذج.
- للمراجعة
- 02 History Replace استبدال مدخل السجل
- الكتابة فوق العنوان الحالي في سجل المتصفح بدلاً من الإضافة فوقه لمنع الرجوع لشاشة الدخول.
- للمراجعة
- 03 Wildcard Route مسار الالتقاط الشامل
- مسار بنجمة يمتلك أقل أولوية مطابقة ليعرض صفحة عدم العثور عند كتابة أي عنوان غير معرّف.
- للمراجعة
- 04 ProtectedRoute حارس المسارات المحمية
- مكون تخطيط يتحقق من جلسة الواجهة لتحويل الزوار إلى صفحة الدخول، ويكتمل أمنياً بتحقق الخادم.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات4
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 HTTP HTTP
- Hypertext Transfer Protocol
- بروتوكول الويب الذي ينقل رموز الحالة القياسية مثل 401 و403 للصلاحيات و404 لعدم العثور.
- للمراجعة
- 02 JWT JWT
- JSON Web Token
- صيغة رمز موقّع يتحقق الخادم الخلفي من صحته وصلاحيته في كل طلب حماية.
- للمراجعة
- 03 OWASP OWASP
- Open Worldwide Application Security Project
- المؤسسة العالمية لأمن تطبيقات الويب التي تؤكد وجوب فحص الصلاحيات على الخادم دائماً.
- للمراجعة
- 04 SPA SPA
- Single-Page Application
- تطبيق يعمل بالمتصفح تنظم حواجز المسارات فيه تجربة التصفح بينما يحمي الخادم البيانات السرية.
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
مهامك قبل الاختبار
خطوة صغيرة كل مرة. وإنجاز تقدر ترجع له.
-
افتح مثال التحويل وصفحة 404 في محرر التجريب وجرّب رابط المسار القديم لملاحظة تحويله الفوري، ثم اختبر مساراً غير موجود لمعاينة صفحة 404.
-
في مثال المسارات المحمية، راقب التحويل التلقائي إلى شاشة الدخول ثم اضغط تسجيل الدخول للعودة للشهادات، وجرّب تسجيل الخروج للتأكد من فعالية الحارس.
تأشير المهمة إقرار منك بإتمامها، وليس تصحيحًا آليًا للكود. يُحفظ تقدمك في حسابك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي10 أسئلة تنتظرك ＋
متى نستخدم خطاف useNavigate() بدلاً من مكون <Link>؟
يُستخدم useNavigate() عندما يحدث الانتقال برمجياً عقب إرسال نموذج أو اكتمال عملية غير متزامنة.
ماذا يحقق تمرير الخيار { replace: true } في استدعاء navigate("/dashboard", { replace: true })؟
يستبدل العنوان الحالي في سجل التصفح فلا يعيد زر الرجوع المستخدم إلى شاشة الدخول السابقة.
كيف تعود خطوة واحدة للخلف في سجل التصفح برمجياً باستخدام الدالة المستخرجة من useNavigate()؟
استدعاء navigate(-1) يرجع خطوة واحدة في سجل المتصفح تماماً كزر الرجوع.
ما مكون React Router الذي ينفذ إعادة توجيه تصريحية تلقائية بمجرد تصييره في JSX؟
يتولى مكون <Navigate to="/target" replace /> التحويل التصريحي المباشر عند عرضه.
ما نمط خاصية path الذي يلتقط أي عنوان غير مطابق لعرض صفحة 404 مخصصة؟
يمثل النمط path="*" مسار الالتقاط الشامل لأي رابط لا يطابق المسارات المعرّفة.
بسبب امتلاك path="*" أقل نقاط أخصية في React Router، تفوز المسارات الصريحة مثل /courses دائماً قبل مسار النجمة.
صواب؛ لا يتفعّل مسار النجمة إلا إذا فشلت جميع المسارات الثابتة والديناميكية في مطابقة العنوان.
لماذا يمرر حارس ProtectedRoute الكائن state={{ from: location.pathname }} عند التحويل لصفحة الدخول؟
لحفظ الصفحة التي أراد الزائر فتحها، بحيث تعيده صفحة الدخول إليها تلقائياً فور نجاح تسجيله.
يكفي تغليف لوحة الإدارة بمكون <ProtectedRoute> في الواجهة لتأمين البيانات تماماً دون الحاجة لفحص الصلاحيات في الخادم.
خطأ فادح؛ تعمل شفرة الواجهة في متصفح الزائر ويمكن تجاوزها، لذا يجب فرض التحقق الأمني من الهوية والصلاحيات في الخادم دائماً.
أين يجب تطبيق التحقق الأمني الفعلي من هوية المستخدم وصلاحياته بشكل إلزامي في تطبيقات الويب؟
تُفرض المصادقة وفحص الصلاحيات إلزامياً على الخادم الخلفي ونقاط نهاية API في كل طلب.
أثناء جريان الفحص غير المتزامن للجلسة عند تحديث الصفحة، يجب أن ينتظر ProtectedRoute قبل إطلاق التحويل إلى /login.
صواب؛ انتظار نتيجة فحص الجلسة يمنع طرد العضو المسجل فعلياً بالخطأ إلى شاشة الدخول.