تعمل المصادقة كحاجز وقائي لتطبيقات البرامج ، والتحقق من هوية المستخدمين ومنح الوصول إلى الموارد المحمية. ومع ذلك ، فإن مطالبة المستخدمين بالمصادقة بشكل متكرر ، خاصة خلال جلسة واحدة ، يمكن أن يؤدي إلى الإحباط ، ويعيق الإنتاجية ، ويدمر تجربتهم الإجمالية.

للتغلب على هذا التحدي ، يمكنك استخدام ملفات تعريف الارتباط وتخزين الجلسة للحفاظ على بيانات مصادقة المستخدم وغيرها من البيانات الشخصية المعلومات — مما يسمح للمستخدمين بالبقاء مصادقين طوال الجلسة دون الحاجة إلى إعادة المصادقة المستمرة ، وبالتالي ، التحسين تجربتهم.

إدارة بيانات جلسة المستخدم باستخدام ملفات تعريف الارتباط وتخزين الجلسة

تعد إدارة جلسة المستخدم جانبًا مهمًا لبناء تطبيقات React قوية وآمنة. تضمن إدارة بيانات الجلسة بشكل صحيح باستخدام ملفات تعريف الارتباط وتخزين الجلسة تجربة مستخدم سلسة وشخصية مع الحفاظ على تدابير الأمان اللازمة.

تتضمن بيانات جلسة المستخدم عادةً معلومات خاصة بجلسة المستخدم الحالية أو تفاعله مع أحد التطبيقات. يمكن أن تختلف هذه البيانات اعتمادًا على متطلبات ووظائف التطبيق ولكنها تتضمن عادةً ما يلي:

• المعلومات المتعلقة بالمصادقة.
• تفضيلات وإعدادات المستخدم.
• نشاط المستخدم والتاريخ.

ملفات تعريف الارتباط هي ملفات نصية تحتوي على أجزاء صغيرة من البيانات المخزنة بواسطة متصفحات الويب على جهاز المستخدم. يتم استخدامها بشكل شائع لتخزين بيانات المصادقة وأي معلومات شخصية أخرى للمستخدم ، مما يسمح لتطبيقات الويب بالحفاظ على جلسات المستخدم عبر جلسات المتصفح المتعددة.

على الجانب الآخر، تخزين الجلسة — مماثل للتخزين المحلي—هي آلية تخزين من جانب العميل توفرها المتصفحات الحديثة. على عكس ملفات تعريف الارتباط ، يقتصر الأمر على جلسة تصفح محددة ويمكن الوصول إليه فقط من خلال علامة التبويب أو النافذة نفسها. يوفر تخزين الجلسة طريقة بسيطة ومباشرة لتخزين البيانات الخاصة بالجلسة لتطبيقات الويب.

تلعب ملفات تعريف الارتباط وتخزين الجلسة أدوارًا مهمة في إدارة بيانات جلسة المستخدم. تعد ملفات تعريف الارتباط رائعة في المواقف التي تتطلب استمرار البيانات عبر جلسات متعددة. في المقابل ، يعد تخزين الجلسة مفيدًا عندما تريد عزل البيانات في جلسة تصفح واحدة ، مما يوفر خيار تخزين خفيف الوزن ومحددًا.

الآن ، دعنا نستكشف كيفية التعامل مع بيانات جلسة المستخدم ، مع التركيز بشكل خاص على تخزين معلومات المصادقة باستخدام ملفات تعريف الارتباط وتخزين الجلسة.

قم بإعداد مشروع React

للبدء، قم بإعداد مشروع React باستخدام Vite. بعد ذلك ، قم بتثبيت هذه الحزم في مشروعك.

npm قم بتثبيت js-cookie reaction-router-dom

من الناحية المثالية ، بعد قيام المستخدم بتسجيل الدخول والمصادقة على بيانات اعتماده بنجاح بواسطة واجهة برمجة تطبيقات مصادقة خلفية ، ملفات تعريف الارتباط ورموز المصادقة لتخزين الجلسة أو معرفات الجلسة أو أي بيانات أخرى ذات صلة أثناء المستخدم حصة.

هذه الرموز المميزة أو المعرفات جنبًا إلى جنب مع البيانات الإضافية المخزنة في متصفح المستخدم يتم تلقائيًا المدرجة في الطلبات اللاحقة المقدمة إلى الخادم للتحقق قبل أن يتمكن المستخدم من الوصول المحمي موارد.

بهذه الطريقة ، تستمر جلسة المستخدم عبر طلبات متعددة - مما يضمن تفاعلهم بسلاسة مع التطبيق دون الحاجة إلى إعادة المصادقة لكل طلب.

يمكنك العثور على رمز هذا المشروع في هذا مستودع جيثب.

إدارة بيانات جلسة مصادقة المستخدم باستخدام ملفات تعريف الارتباط

لتوضيح كيفية استخدام ملفات تعريف الارتباط لتخزين معلومات المصادقة الخاصة بالمستخدمين ، انطلق وقم بإنشاء ملف المكونات / Login.jsx ملف في src الدليل. داخل هذا الملف ، أضف الكود التالي.

1. قم بإجراء عمليات الاستيراد التالية.

   يستورد {useState} من'تتفاعل';
   يستورد {useNavigate} من"رد فعل جهاز التوجيه دوم";
   يستورد بسكويت من'js-cookie';

2. قم بإنشاء مكون وظيفي وأضف عناصر JSX لنموذج تسجيل الدخول.

   مقدار ثابت تسجيل الدخول = () => {
   مقدار ثابت [username، setUsername] = useState ('');
   مقدار ثابت [password، setPassword] = useState ('');
   يعود (
   
   
   
    اكتب ="نص"
    نائب ="اسم المستخدم"
    القيمة = {اسم المستخدم}
    onChange = {(e) => setUsername (e.target.value)}
    />
    اكتب ="كلمة المرور"
    نائب ="كلمة المرور"
    القيمة = {كلمة المرور}
    onChange = {(e) => setPassword (e.target.value)}
    />
   "يُقدِّم"> تسجيل الدخول </button>
    </form>
    );
   };
   يصدّرتقصير تسجيل الدخول؛

نظرًا لأننا لا نملك واجهة برمجة تطبيقات خلفية لمصادقة بيانات اعتماد المستخدم ، فسننشئ وظيفة تتحقق من البيانات التي أدخلها المستخدم في نموذج تسجيل الدخول باستخدام بيانات اعتماد المستخدم التجريبية. داخل المكون الوظيفي ، أضف الكود التالي.

مقدار ثابت testAuthData = {
 اسم المستخدم: 'امتحان',
 كلمة المرور: 'امتحان',
 }; 
مقدار ثابت AuthenticateUser = (اسم المستخدم كلمة المرور) => {
لو (اسم المستخدم testAuthData.username && password testAuthData.password) { 
مقدار ثابت بيانات المستخدم = {
 اسم المستخدم،
 كلمة المرور،
 };
مقدار ثابت expirationTime = جديدتاريخ(جديدتاريخ() .getTime () + 60000);
 مجموعة ملفات تعريف الارتباط ("المصادقة", جسون.stringify (userData) ، { تنتهي: تاريخ انتهاء الصلاحية })؛
يعودحقيقي;
 }
يعودخطأ شنيع;
 };
مقدار ثابت handleLogin = (ه) => {
 e.preventDefault () ؛
مقدار ثابت isAuthenticated = AuthenticateUser (اسم المستخدم ، كلمة المرور) ؛
لو (موثق) {
 التنقل('/محمي');
 } آخر {
// إظهار رسالة الخطأ أو تنفيذ إجراءات أخرى للمصادقة الفاشلة
 }
 };

داخل المصادقة على المستخدم وظيفة ، فإنه يتحقق مما إذا كان اسم المستخدم وكلمة المرور المقدمين يتطابقان مع بيانات مصادقة الاختبار. إذا كانت بيانات الاعتماد متطابقة ، فإنها تنشئ ملف بيانات المستخدم كائن مع اسم المستخدم وكلمة المرور. ثم يحدد وقت انتهاء صلاحية ملف تعريف الارتباط ويخزن ملف بيانات المستخدم في ملف تعريف ارتباط اسمه المصادقة باستخدام مجموعة ملفات تعريف الارتباط طريقة.

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

تسمح بيانات جلسة المستخدم هذه لكود الخادم بالتحقق من هوية المستخدم وتفويض الوصول إلى الامتيازات دون مطالبة المستخدم بإعادة المصادقة لكل طلب.

قم بتحديث ملف App.jsx

قم بإجراء تغييرات على App.jsx ملف للتعامل مع توجيه المستخدم بعد المصادقة الناجحة

يستورد {BrowserRouter، Route، Routes، useNavigate} من"رد فعل جهاز التوجيه دوم";
يستورد بسكويت من'js-cookie';
يستورد تسجيل الدخول من"./components/Login";
مقدار ثابت صفحة محمية = ({ ...استراحة }) => {
مقدار ثابت isAuthenticated =!! Cookies.get ("المصادقة");
مقدار ثابت التنقل = useNavigate () ؛
مقدار ثابت handleLogout = () => { 
 ملفات تعريف الارتباط. إزالة ("المصادقة");
 التنقل('/تسجيل الدخول'); 
 };
لو (! موثق) {
 التنقل('/تسجيل الدخول'); 
يعودباطل; // Return null لمنع عرض أي شيء آخر
 }
يعود (



حجم الخط: "24 بكسل", لون: 'أزرق' }}> مرحبًا بالعالم! </h1>
الهامش: "10 بكسل" }} onClick = {handleLogout}>
 تسجيل خروج
 </button>
 </div>
 );
};


مقدار ثابت التطبيق = () => {
يعود (


"/محمي/*" العنصر = {} />
"/تسجيل الدخول" العنصر = {} />
 </Routes>
 </BrowserRouter>
 );
};
يصدّرتقصير برنامج؛

يقوم الكود أعلاه بإعداد المكونات الضرورية ومنطق التوجيه. يتضمن زر تسجيل الخروج الذي ، عند الضغط عليه ، يحذف ملف تعريف ارتباط المصادقة ويعيد توجيه المستخدم إلى صفحة تسجيل الدخول.

بالإضافة إلى ذلك ، يتحقق من وجود ملف تعريف ارتباط المصادقة ويعيد توجيه المستخدمين إلى صفحة تسجيل الدخول إذا كانت غير موجودة. ومع ذلك ، إذا كان ملف تعريف الارتباط موجودًا ، فإن ملف الصفحة المحمية يعرض المكون صفحة يمكن الوصول إليها حصريًا للمستخدمين المصادق عليهم.

أخيرًا ، قم بتشغيل الأمر أدناه لتدوير خادم التطوير لاختبار التطبيق.

npm تشغيل dev

في المتصفح الخاص بك ، انتقل إلى http://127.0.0.1:5173/login، وأدخل اختبار اعتماد المصادقة. بعد تسجيل الدخول بنجاح ، يتم إنشاء ملف تعريف ارتباط جديد يحتوي على بيانات الجلسة ، والتي تتضمن معلومات مصادقة الاختبار.

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

تخزين بيانات مصادقة المستخدم باستخدام تخزين الجلسة

يعمل كل من تخزين الجلسة وملفات تعريف الارتباط بشكل مشابه. لتخزين المعلومات الضرورية في تخزين جلسة المتصفح ، يمكنك استخدام sessionStorage.setItem طريقة.

 sessionStorage.setItem ("المصادقة", جسون.stringify (userData)) ؛

بإضافة العبارة أعلاه داخل المصادقة على المستخدم تعمل في تسجيل الدخول المكون ، يمكنك تخزين بيانات المصادقة الخاصة بالمستخدم في تخزين جلسة المتصفح.

استكشاف حالات الاستخدام الإضافية لملفات تعريف الارتباط وتخزين الجلسات

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

من خلال الاستفادة من هذه الميزات ، يمكنك إدارة بيانات الجلسة الإضافية ، مما يؤدي إلى تجربة مستخدم أكثر أمانًا وتخصيصًا.