كيفية إعادة توجيه المستخدم بعد تسجيل الدخول في React

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

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

في React Router v6 ، هناك طريقتان يمكنك استخدامهما لإعادة توجيه المستخدم - مكون Navigate و useNavigate () صنارة صيد.

أنشئ تطبيق React

أنشئ تطبيق React بسيطًا باستخدام امتداد إنشاء-رد-التطبيق يأمر. ستستخدم هذا التطبيق لاختبار كيفية استخدام مكون Navigate و useNavigate () ربط العمل.

npx خلقرد فعل التطبيق رد فعل إعادة التوجيه

قم بإنشاء صفحة تسجيل الدخول

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

قم بإنشاء ملف جديد بتنسيق

src المجلد وتسميته Login.js. ثم أضف الكود التالي ، إلى قم بإنشاء نموذج تسجيل الدخول.

يستورد {useState} من "تتفاعل"؛
يستورد لوحة القيادة من "./لوحة القيادة"؛
مقدار ثابت تسجيل الدخول = () => {
 const [username، setusername] = useState ("");
 const [password، setpassword] = useState ("");
مقدار ثابت [موثق ، setauthenticated] = useState (localStorage.getItem (localStorage.getItem ("موثق") || خاطئة));
 المستخدمون الثابتون = [{اسم المستخدم: "جين"، كلمه السر: "testpassword" }];
مقدار ثابت handleSubmit = (e) => {
ه.منع افتراضي()
مقدار ثابت account = users.find ((user) => user.username username) ؛
 إذا (حساب && account.password password) {
 تعيين مصدق (حقيقي)
 localStorage.setItem ("موثق"، حقيقي)؛
 }
 };
إرجاع (
<شعبة>
<ص>مرحبًا بعودتك</ ص>
<النموذج onSubmit = {handleSubmit}>
<الإدخال
 اكتب ="نص"
 الاسم ="اسم المستخدم"
 القيمة = {اسم المستخدم}
 عند التغيير = {(هـ) => setusername (e.target.value)}
 />
<الإدخال
 اكتب ="كلمه السر"
 الاسم ="كلمة المرور"
 عند التغيير = {(هـ) => setpassword (e.target.value)}
 />
<نوع الإدخال ="إرسال" القيمة ="يُقدِّم" />
</form>
</div>
 )
};
}
يصدّرإفتراضي تسجيل الدخول؛

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

قم بإنشاء صفحة لوحة المعلومات

أضف التعليمات البرمجية التالية في ملف جديد يسمى لوحة القيادة. js.

مقدار ثابت لوحة القيادة = () => {
إرجاع (
<شعبة>
<ص>مرحبًا بك في لوحة التحكم</ ص>
</div>
 );
};
يصدّرإفتراضي لوحة القيادة؛

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

للقيام بذلك ، قم بإعداد مسارات التطبيق أولاً باستخدام جهاز توجيه React.

npm تثبيت رد فعل جهاز التوجيه دوم

في index.js ، قم بإعداد التوجيه للتطبيق الخاص بك.

يستورد تتفاعل من "تتفاعل"؛
يستورد رد فعل من "رد فعل دوم / العميل" ؛
يستورد تطبيق من "./تطبيق"؛
يستورد {BrowserRouter ، Route ، Routes} من "رد فعل جهاز التوجيه دوم" ؛
يستورد تسجيل الدخول من "./تسجيل الدخول"؛
يستورد لوحة القيادة من "./لوحة القيادة"؛
مقدار ثابت الجذر = ReactDOM.createRoot (وثيقة.getElementById ("root")) ؛
جذر.يجعل(
<تتفاعل. الوضع الصارم>
<المستعرض>
<طرق>
<عنصر فهرس المسار = {<تطبيق />} />
<مسار المسار ="تسجيل الدخول" العنصر = {<تسجيل الدخول />} />
<مسار المسار ="لوحة القيادة" العنصر = {<لوحة القيادة />} />
</Routes>
</BrowserRouter>
</React.StrictMode>
);

حماية صفحة لوحة المعلومات

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

يستورد {useEffect، useState} من "تتفاعل"؛
مقدار ثابت لوحة القيادة = () => {
مقدار ثابت [مصدق ، setauthenticated] = useState (لا شيء);
 useEffect (() => {
 const loggedInUser = localStorage.getItem ("موثق");
 إذا (loggedInUser) {
 setauthenticated (loggedInUser) ؛
 }
 }, []);
 إذا (! مصدق) {
// إعادة توجيه
 } آخر {
إرجاع (
<شعبة>
<ص>مرحبًا بك في لوحة التحكم</ ص>
</div>
 );
 }
};
يصدّرإفتراضي لوحة القيادة؛

إعادة توجيه المستخدم إلى صفحة تسجيل الدخول باستخدام التنقل

استبدل مكون Navigate مكون إعادة التوجيه الذي تم استخدامه في React Router v5. استيراد تنقل من رد فعل جهاز التوجيه دوم.

يستورد { التنقل } من "رد فعل جهاز التوجيه دوم" ؛

لإعادة توجيه المستخدمين غير المصادق عليهم ، استخدمه على النحو التالي.

إذا (! مصدق) {
 إرجاع <انتقل إلى استبدال ="/login" />;
} آخر {
إرجاع (
<شعبة>
<ص>مرحبًا بك في لوحة التحكم</ ص>
</div>
 );
}

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

إعادة توجيه المستخدم إلى صفحة أخرى باستخدام useNavigate ()

الخيار الآخر لإجراء عمليات إعادة التوجيه في React هو useNavigate () صنارة صيد. يوفر هذا الخطاف الوصول إلى واجهة برمجة التطبيقات الضرورية للتنقل. ابدأ باستيراده من React-router-dom.

يستورد {useNavigate} من "رد فعل جهاز التوجيه دوم" ؛

أعد التوجيه بمجرد مصادقة المستخدم بنجاح في ملف مقبض تعمل مثل هذا:

مقدار ثابت التنقل = useNavigate () ؛
مقدار ثابت تسجيل الدخول = () => {
مقدار ثابت التنقل = useNavigate () ؛
 const [username، setusername] = useState ("");
 const [password، setpassword] = useState ("");
مقدار ثابت [مصدق ، setauthenticated] = useState (
 localStorage.getItem (localStorage.getItem ("موثق") || خاطئة)
 );
 المستخدمون الثابتون = [{اسم المستخدم: "جين"، كلمه السر: "testpassword" }];
مقدار ثابت handleSubmit = (e) => {
ه.منع افتراضي();
مقدار ثابت account = users.find ((user) => user.username username) ؛
 إذا (حساب && account.password password) {
 localStorage.setItem ("موثق"، حقيقي)؛
 التنقل("/dashboard");
 }
 };
إرجاع (
<شعبة>
<النموذج onSubmit = {handleSubmit}>
<الإدخال
 اكتب ="نص"
 الاسم ="اسم المستخدم"
 القيمة = {اسم المستخدم}
 عند التغيير = {(هـ) => setusername (e.target.value)}
 />
<الإدخال
 اكتب ="كلمه السر"
 الاسم ="كلمة المرور"
 عند التغيير = {(هـ) => setpassword (e.target.value)}
 />
<نوع الإدخال ="إرسال" القيمة ="يُقدِّم" />
</form>
</div>
 );
};

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

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

التوجيه في React

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