معالجة مشكل protect routes في react router dom v6

المشكلة في الكود هي أنك تستخدم خاصية 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 لتحديد ما إذا كان هذا المفتاح موجودًا أم لا.

بتاريخ 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 لتحديد ما إذا كان هذا المفتاح موجودًا أم لا.

شكرا

نفس الشيء لا يوجد تغيير

من الأفضل رفع مجلد المشروع هنا لتفقد المشكلة

بتاريخ 39 دقائق مضت قال Mustafa Suleiman:

من الأفضل رفع مجلد المشروع هنا لتفقد المشكلة

تفضّل 

test-hsoub.zip