شرح صفوف ومحتوى الفقرة
تتطلب طلبات التعديل المحمية إثبات هوية المستخدم للخادم. تجنب تخزين رموز الجلسات الحساسة أو مفاتيح المصادقة طويلة الأمد داخل window.localStorage؛ لأن أي كود JavaScript يعمل في الصفحة يستطيع قراءته، مما يجعل أي ثغرة برمجة نصية عابرة للمواقع XSS كفيلة بتسريب جلسات المستخدمين.
المعيار الأمني الأرقى هو اعتماد كوكيز الجلسة المزودة بسمات HttpOnly; Secure; SameSite مع حماية CSRF؛ إذ يرسلها المتصفح تلقائياً مع credentials: 'same-origin' بينما تظل محجوبة تماماً عن قراءة السكريبتات. يلخص الجدول التالي قواعد عمليات التعديل:
| عملية الشبكة | إعداد دالة fetch<code>() | مزامنة مصفوفة الحالة في React |
|---|---|---|
| إنشاء سجل جديد | method: 'POST' مع جسم JSON | إلحاق السجل العائد من الخادم عبر [...prev, created] |
| تحديث سجل قائم | method: 'PUT' أو 'PATCH' مع جسم JSON | استبدال السجل المطابق بنقاء عبر prev.map<code>() |
| حذف سجل محدد | method: 'DELETE' على عنوان المورد | استبعاد المعرّف المحذوف عبر prev.filter<code>() |
| توثيق الجلسة | credentials: 'same-origin' مع كوكيز HttpOnly | حفظ تفضيلات العرض فقط ومنع تخزين الرموز السرية في localStorage |
ملخص الدرس
حصاد الدرسمراجعة مركّزة لأهم المفاهيم والقواعد الهندسية التي أتقنتها في هذا الدرس قبل التطبيق العملي
ماذا تعلّمت في هذا الدرس؟
أتقنت في هذا الدرس إرسال طلبات POST وPUT وDELETE من دوال الأحداث في React، ومزامنة الحالة بنقاء عبر map وfilter، ومنع الإرسال المكرر براية isSubmitting، وتطبيق التحديث المتفائل مع التراجع الآمن، وحماية جلسات المصادقة بكوكيز HttpOnly. الخطوة التالية: انتقل الآن إلى الدرس رقم 41 «بناء الخطافات المخصصة Custom Hooks لإعادة استخدام المنطق» لمواصلة البناء التراكمي المتدرج في مسار React الحديث.