كيفية الاستمرار في تسجيل دخول مستخدم في React

إذا أجريت بحثًا سريعًا في Google لاستمرار تسجيل دخول مستخدم في React (أو الاحتفاظ بمستخدم مسجّل الدخول في React) ، فلن تحصل على الكثير من النتائج المباشرة. لا توجد أمثلة سهلة لمتابعة كيفية تحقيق ذلك. لذلك قررت أن أكتب هذا الدليل البسيط.

ربما تكون قد أجريت بحثًا عن هذا ورأيت كلمة localStorage في الأرجاء . نعم ، سنستخدم localStorage لكنني سأوضح لك بالضبط كيف يتم ذلك.

بعض الملاحظات على localStorage.

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

الإعداد الأولي

هيا بنا نبدأ. لقد قمت بنشر خادم سريع بسيط إلى Heroku لاستخدامه في اختبار هذا التطبيق.

  1. قم بإنشاء تطبيق React جديد وتوجه إلى المكون.
  2. تثبيت أكسيوس باستخدام npm install axiosواستيرادها من الداخل
  3. بعد ذلك ، قم بإنشاء نموذج تسجيل دخول بسيط يقبل اسم مستخدم وكلمة مرور.
import React, { useState } from "react"; import axios from "axios"; const App = () => { const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [user, setUser] = useState() const handleSubmit = async e => { }; // if there's a user show the message below if (user) { return {user.name} is loggged in ; } // if there's no user, show the login form return (  Username:   setUsername(target.value)} /> password:   setPassword(target.value)} /> Login  ); }; export default App; 

كما ترى ، قمنا بتعريف وظيفة handleSubmit غير متزامنة لمعالجة طلب تسجيل الدخول. لقد حددنا أيضًا شرطًا يعرض رسالة تسجيل دخول user.name إذا كان لدينا مستخدم ، ونموذج تسجيل الدخول إذا لم يكن لدينا مستخدم.

بعد ذلك ، دعنا نكمل الوظيفة. ستعمل هذه الوظيفة في الخطوات التالية:

  1. أرسل تفاصيل تسجيل الدخول إلى الخادم.
  2. إذا كان الطلب ناجحًا (انتظار غير متزامن) ، فقم بتخزين معلومات المستخدم في localStorage وقم بتعيين حالة المستخدم.

تعامل مع حدث تسجيل الدخول

دعنا نحدد معالج الحدث handleSubmit .

const handleSubmit = async e => { e.preventDefault(); const user = { username, password }; // send the username and password to the server const response = await axios.post( "//blogservice.herokuapp.com/api/login", user ); // set the state of the user setUser(response.data) // store the user in localStorage localStorage.setItem('user', response.data) console.log(response.data) }; 

ملاحظة: استخدم كتلة tryCatch للتعامل مع الأخطاء في الوظائف غير المتزامنة.

الآن بعد أن تم الانتهاء من وظيفتنا ، يمكنك تشغيل npm start لاختبار تطبيقك. تسجيل الدخول باسم المستخدم : user2 ، كلمة المرور : كلمة المرور.

يجب أن تتلقى ما يلي كرد. و حاليا ، رمز و اسم المستخدم

تحقق مما إذا كان المستخدم قد قام بتسجيل الدخول مسبقًا

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

 useEffect(() => { const loggedInUser = localStorage.getItem("user"); if (loggedInUser) { const foundUser = JSON.parse(loggedInUser); setUser(foundUser); } }, []); 

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

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

كنصيحة إضافية ، إليك كيفية تنفيذ تسجيل الخروج.

تنفيذ وظيفة تسجيل الخروج

لتسجيل الخروج ، نقوم ببساطة بإفراغ حالة المستخدم وإزالة المستخدم من localStorage.

دعونا ننفذ ذلك.

أولاً ، نقوم بإنشاء زر تسجيل الخروج

logout 

ثم نقوم بإنشاء وظيفة تسجيل الخروج.

const handleLogout = () => { setUser({}); setUsername(""); setPassword(""); localStorage.clear(); }; 

وهذا كل شيء ، لقد انتهينا.

إليك رابط إلى المحتوى الكامل على GitHub. يمكنك متابعتي هناك لمزيد من التحديثات.