محمود_سعداوي نشر 1 سبتمبر 2023 أرسل تقرير مشاركة نشر 1 سبتمبر 2023 لسلام عليكم الرجاء المساعدة في عدم فاعلية الكود التالي App function App() { return ( <> <Routes> <Route path="/" element={ <AppRoute redirect='/login' user={Auth.auth} > <Chat/> </AppRoute> } /> <Route path="/register" element={ <AppRoute redirect='/' user={Auth.guest} > <Register/> </AppRoute> } /> <Route path="/login" element={ <AppRoute redirect='/' user={Auth.guest} > <Login/> </AppRoute> } /> <Route path= "*" element={ <NotFound/> }/> </Routes> </> ); } AppRoute const AppRoute = ({ user, children, redirect }) => { if (!user) { return <Navigate to={redirect} />; } return children; }; Auth const Auth = { auth: () => localStorage.getItem('user') !== null, guest: () => localStorage.getItem('user') === null, }; مثلما تلاحظون، في صورة عدم وجود مستخدم في ذاكرة المتصفح فإنه يتوجه مباشرة إلى صفحة تسجيل الدخول إلا أن النتيجة التي تحصلت عليها عكس ذلك ففي صورة كانت ذاكرة المتصفح فارغة فإنه يتوجه إلى الصفحة الرئيسية شكرا على المساعدة 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mustafa Suleiman نشر 2 سبتمبر 2023 أرسل تقرير مشاركة نشر 2 سبتمبر 2023 المشكلة في الكود هي أنك تستخدم خاصية user في AppRoute لتحديد ما إذا كان المستخدم مسجلاً الدخول أم لا، ولكن خاصية user تلك ترجع true إذا كانت هناك قيمة مخزنة في مفتاح user في localStorage، وليس إن كان المستخدم مسجلاً الدخول بالفعل. أي ستحتاج إلى استخدام خاصية auth في Auth بدلاً من user، وترجع خاصية auth true إذا كان المستخدم مسجلاً الدخول بالفعل، وfalse إذا لم يكن مسجلاً الدخول. والكود بعد التعديل هو: App function App() { return ( <> <Routes> <Route path="/" element={ <AppRoute redirect='/login' user={Auth.auth} > <Chat/> </AppRoute> } /> <Route path="/register" element={ <AppRoute redirect='/' user={Auth.guest} > <Register/> </AppRoute> } /> <Route path="/login" element={ <AppRoute redirect='/' user={Auth.guest} > <Login/> </AppRoute> } /> <Route path= "*" element={ <NotFound/> }/> </Routes> </> ); } AppRoute const AppRoute = ({ user, children, redirect }) => { if (!user) { return <Navigate to={redirect} />; } return children; }; Auth const Auth = { auth: () => localStorage.getItem('userToken') !== null, guest: () => localStorage.getItem('userToken') === null, }; الكود يعمل على تخزين رمز المستخدم في مفتاح userToken في localStorage، ثم استخدام خاصية auth لتحديد ما إذا كان هذا المفتاح موجودًا أم لا. 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 3 سبتمبر 2023 الكاتب أرسل تقرير مشاركة نشر 3 سبتمبر 2023 بتاريخ 15 ساعة قال Mustafa Suleiman: المشكلة في الكود هي أنك تستخدم خاصية user في AppRoute لتحديد ما إذا كان المستخدم مسجلاً الدخول أم لا، ولكن خاصية user تلك ترجع true إذا كانت هناك قيمة مخزنة في مفتاح user في localStorage، وليس إن كان المستخدم مسجلاً الدخول بالفعل. أي ستحتاج إلى استخدام خاصية auth في Auth بدلاً من user، وترجع خاصية auth true إذا كان المستخدم مسجلاً الدخول بالفعل، وfalse إذا لم يكن مسجلاً الدخول. والكود بعد التعديل هو: App function App() { return ( <> <Routes> <Route path="/" element={ <AppRoute redirect='/login' user={Auth.auth} > <Chat/> </AppRoute> } /> <Route path="/register" element={ <AppRoute redirect='/' user={Auth.guest} > <Register/> </AppRoute> } /> <Route path="/login" element={ <AppRoute redirect='/' user={Auth.guest} > <Login/> </AppRoute> } /> <Route path= "*" element={ <NotFound/> }/> </Routes> </> ); } AppRoute const AppRoute = ({ user, children, redirect }) => { if (!user) { return <Navigate to={redirect} />; } return children; }; Auth const Auth = { auth: () => localStorage.getItem('userToken') !== null, guest: () => localStorage.getItem('userToken') === null, }; الكود يعمل على تخزين رمز المستخدم في مفتاح userToken في localStorage، ثم استخدام خاصية auth لتحديد ما إذا كان هذا المفتاح موجودًا أم لا. شكرا نفس الشيء لا يوجد تغيير اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Mustafa Suleiman نشر 3 سبتمبر 2023 أرسل تقرير مشاركة نشر 3 سبتمبر 2023 من الأفضل رفع مجلد المشروع هنا لتفقد المشكلة 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمود_سعداوي نشر 3 سبتمبر 2023 الكاتب أرسل تقرير مشاركة نشر 3 سبتمبر 2023 بتاريخ 39 دقائق مضت قال Mustafa Suleiman: من الأفضل رفع مجلد المشروع هنا لتفقد المشكلة تفضّل test-hsoub.zip اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
محمود_سعداوي
لسلام عليكم
الرجاء المساعدة في عدم فاعلية الكود التالي
App
AppRoute
Auth
const Auth = { auth: () => localStorage.getItem('user') !== null, guest: () => localStorage.getItem('user') === null, };
مثلما تلاحظون، في صورة عدم وجود مستخدم في ذاكرة المتصفح فإنه يتوجه مباشرة إلى صفحة تسجيل الدخول
إلا أن النتيجة التي تحصلت عليها عكس ذلك
ففي صورة كانت ذاكرة المتصفح فارغة فإنه يتوجه إلى الصفحة الرئيسية
شكرا على المساعدة
رابط هذا التعليق
شارك على الشبكات الإجتماعية
4 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.