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

محمود سعداوي2 · منذ 10 ساعة

السلام عليكم

لدي مشكلة في التنقل عند إنشاء المسارات المحمية. بعد تسجيل الدخول وتخزين بيانات المستخدم في localStorage، لا يتم توجيهي إلى لوحة التحكم (dashboard).

إليك الكود الخاص بي، بما في ذلك App.js، وroutes.js، وLoginForm.js. علماً بأنه قبل تطبيق المسارات المحمية، كان كل شيء يعمل بشكل طبيعي.

App.js

function App() {
  return (
    <Router/>
  );
}

routes.js

const user = JSON.parse(localStorage.getItem("user"))

const router = createBrowserRouter([
    {
        path: "/",
        element: !user ? <LoginPage /> : <Navigate to="/dashboard" />
    },
    {
        path: "/dashboard",
        element: user ? <DashboardLayout /> : <Navigate to="/" />, 
        children: [
            {
                index: true,
                element: <Dashboard />
            },
            ...
        ]
    }
]);

export default function Router() {
    return <RouterProvider router={router} />;
}

LoginForm.js

const LoginForm = () => {
  const navigate = useNavigate();
  const { formData, handleChange } = useForm({
    unique_identifier: "",
    password: "",
  }, ["unique_identifier"])

  const { mutate, isPending, isError, error } = useLoginMutation();

  const submitHandler = async (e) => {
    e.preventDefault();
    mutate(
      formData,
      { onSuccess: () => navigate("/dashboard") }
    );
  };
  return (
    <>
      {isError && <Alert message={error} />}
      .... My Form ....
    </>
  );
};

أعتقد أن المشكل يتعلق بعدم إعادة تحديث الحالة (state) عند تسجيل الدخول، مما يمنع إعادة توجيه المستخدم إلى لوحة التحكم (dashboard). لكن أعتقد أنه ليس من الجيد إضافة تطبيقات لإدارة الحالة مثل zustand.

أرجو المساعدة لأجد الحل الأنسب.

محمد عاطف17 · منذ 10 ساعة

وعليكم السلام ورحمة الله وبركاته.

المشكلة الأولي أنك لا تقوم بحفظ بيانات المستخدم في localStorage عند تسجيل الدخول . ولذلك عند إعادة التوجيه إلى dashboard لا يتم العثور على user في localStorage ويتم إعادة التوجيه مرة أخرى إلى login .

بتاريخ 10 دقائق مضت قال محمود سعداوي2:

const submitHandler = async (e) => {
    e.preventDefault();
    mutate(
      formData,
      { onSuccess: () => navigate("/dashboard") }
    );
  };

لهذا يجب عليك إستبدال الكود السابق بهذا الكود والذي نقوم فيه بتخزين بيانات المستخدم :

const submitHandler = async (e) => {
        e.preventDefault();
        mutate(formData, {
            onSuccess: (data) => {
                localStorage.setItem("user", JSON.stringify(data));
                navigate("/dashboard");
            }
        });
    };

وتأكد من أن المتغير data هو بيانات المستخدم لديك . وإذا كانت البيانات بداخل كائن أخر بداخل data مثل data.user تأكد من حفظ data.user حينها.

يجب أن يحل ذلك المشكلة إذا ظلت المشكلة أخبرني وذلك لنقوم بتجربة حل إنشاء حدث لإعادة تحديث الحالة.

محمود سعداوي2 · منذ 5 ساعة

لم يتغير شيء كما أني قمت بأضافة البيانات إلى الذاكرة المحلية للمتصفح بالطريقة التالية

export const useLoginMutation = () => {
    return useMutation({
      mutationFn: async (data) => await loginApi(data),
      onSuccess: (data) => {
        localStorage.setItem("user", JSON.stringify(data))
        console.log("User stored in localStorage:", data);
      },
    });
};

محمد عاطف17 · منذ 5 ساعة

بتاريخ 10 دقائق مضت قال محمود سعداوي2:
لم يتغير شيء كما أني قمت بأضافة البيانات إلى الذاكرة المحلية للمتصفح بالطريقة التالية
export const useLoginMutation = () => {
    return useMutation({
      mutationFn: async (data) => await loginApi(data),
      onSuccess: (data) => {
        localStorage.setItem("user", JSON.stringify(data))
        console.log("User stored in localStorage:", data);
      },
    });
};

إذا لنقم بطريقة إرسال الأحداث مع useState لأن ال localstorage تغيرها لا يؤدي إلى تحديث حالها المكونات.

يرجى إستبدال ملف routes.js بالتالي :

const router = (user) => createBrowserRouter([
    {
        path: "/",
        element: !user ? <LoginPage /> : <Navigate to="/dashboard" />
    },
    {
        path: "/dashboard",
        element: user ? <DashboardLayout /> : <Navigate to="/" />, 
        children: [
            {
                index: true,
                element: <Dashboard />
            },
        ]
    }
]);

export default function Router() {
    const [user, setUser] = useState(JSON.parse(localStorage.getItem("user")));

    useEffect(() => {
        const handleStorageChange = () => {
            setUser(JSON.parse(localStorage.getItem("user")));
        };

        window.addEventListener('storage', handleStorageChange);

        return () => {
            window.removeEventListener('storage', handleStorageChange);
        };
    }, []);

    return <RouterProvider router={router(user)} />;
}

والآن في ملف LoginForm.js نقوم بإرسال الحدث بعد حفظ البيانات في ال localstorage هكذا :

 const submitHandler = async (e) => {
        e.preventDefault();
        mutate(formData, {
            onSuccess: (data) => {
                localStorage.setItem("user", JSON.stringify(data.user));
                window.dispatchEvent(new Event("storage"));
                navigate("/dashboard");
            }
        });
    };

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

السؤال

محمود سعداوي2

3 أجوبة على هذا السؤال

Recommended Posts

محمد عاطف17

محمود سعداوي2

محمد عاطف17

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية