تخزين وإرسال JWT في تطبيق React

بمجرد أن تقوم بتسجيل الدخول بنجاح وتتلقى الـ JWT (JSON Web Token) من الخادم، يجب عليك تخزينه في ذاكرة التخزين المؤقتة (مثل localStorage أو sessionStorage) على جهاز المستخدم. هذا سيسمح لك بالوصول إليه في أي وقت لإرفاقه مع طلباتك إلى الخادم.

في تطبيق React، يمكنك القيام بذلك بواسطة القيام بالخطوات التالية:

1. بمجرد استلام الـ JWT بنجاح من الخادم بعد تسجيل الدخول، قم بتخزينه في ذاكرة التخزين المؤقتة باستخدام localStorage أو sessionStorage. على سبيل المثال:

javascriptCopy code
// عند استلام الـ JWT من الخادم
localStorage.setItem('jwtToken', token);

2. عند كل طلب إلى الخادم، يجب عليك إرفاق الـ JWT كرأس Authorization في الطلب. يمكنك القيام بذلك باستخدام Axios أو Fetch API.

javascriptCopy code
// استرجاع الـ JWT من ذاكرة التخزين المؤقتة
const jwtToken = localStorage.getItem('jwtToken');

// إرسال الطلب إلى الخادم مع الـ JWT في رأس Authorization
axios.get('/admin/data', {
  headers: {
    Authorization: `Bearer ${jwtToken}`
  }
})
  .then(response => {
    // التعامل مع الاستجابة
  })
  .catch(error => {
    // التعامل مع الخطأ
  });

بهذه الطريقة، ستكون قادرًا على إرسال الـ JWT مع كل طلب تقوم به إلى الخادم. يمكنك أيضًا استخدام React Router لإنشاء حراسة للمسارات المطلوبة بحيث يجب على المستخدم أن يكون مسجّلاً الدخول قبل الوصول إليها، وإلا سيتم توجيهه إلى صفحة تسجيل الدخول.

بالطبع، هناك بعض المعلومات الإضافية التي يمكن أن تفيدك في فهم كيفية تخزين الـ JWT وإرساله مع كل طلب في تطبيق React.

1. تخزين الـ JWT بشكل آمن: عند تخزين الـ JWT في ذاكرة التخزين المؤقتة، يجب أن تتأكد من أنه مخزن بشكل آمن وغير قابل للاختراق. يمكنك تشفير الـ JWT قبل تخزينه في localStorage أو sessionStorage باستخدام وظيفة تشفير مثل bcrypt.

2. إدارة انتهاء صلاحية الـ JWT: يجب عليك أيضًا إدارة انتهاء صلاحية الـ JWT. بمجرد انتهاء صلاحية الـ JWT، يجب أن يتم إعادة توجيه المستخدم إلى صفحة تسجيل الدخول لإنشاء JWT جديد. يمكنك التحقق من صلاحية الـ JWT ووقت انتهائه في الخادم وإعادة توليده عند الحاجة.

3. تحقق من صلاحية الـ JWT في الخادم: عندما يصل الـ JWT مع كل طلب إلى الخادم، يجب عليك التحقق من صحته وصلاحيته. يجب أن يتم فحص التوقيع وتاريخ انتهاء الصلاحية لضمان أن الـ JWT لم يتم تزويره وأنه لا يزال صالحًا.

4. إعادة توجيه المستخدم إذا لزم الأمر: في حالة انتهاء صلاحية الـ JWT أو في حالة عدم وجوده عندما يحاول المستخدم الوصول إلى صفحة محمية، يجب عليك إعادة توجيهه إلى صفحة تسجيل الدخول لإعادة المصادقة وإنشاء JWT جديد.

5. حماية المسارات المحمية: يجب عليك استخدام React Router لحماية المسارات المحمية والتحقق من وجود الـ JWT قبل السماح بالوصول إليها. في حالة عدم وجود الـ JWT، يجب على المستخدم إعادة توجيهه إلى صفحة تسجيل الدخول.

من خلال مراعاة هذه النقاط وتنفيذها بشكل صحيح، ستكون قادرًا على تخزين الـ JWT بشكل آمن وإرساله مع كل طلب في تطبيق React الخاص بك بطريقة تؤمن الاتصال بين العميل والخادم.