كيف يمكن إنشاء مسار محمي باستخدام react-router-dom الإصدار 6؟

Abdelrahman Mostafa10 · 22 يناير

السلام عليكم،

أريد إنشاء مسار محمي protected route باستخدام react-router-dom وتخزين الاستجابة في localStorage، بحيث يمكن للمستخدم عرض تفاصيله عندما يحاول فتح التطبيق في المرة القادمة، بعد تسجيل الدخول، مع توجيه المستخدم إلى صفحة اللوحة (dashboard).

وذلك من خلال الإصدار 6 من react-router-dom، فكيف أقوم بذلك؟ مع شرح الطريقة لو سمحتم.

حاليًا لدي الكود التالي في ملف التوجيه:

import React, { useContext } from "react";
import { globalC } from "./context";
import { Route, Switch, BrowserRouter } from "react-router-dom";
import About from "./About";
import Dashboard from "./Dashboard";
import Login from "./Login";
import PageNotFound from "./PageNotFound";

function Routes() {
  const { authLogin } = useContext(globalC);
  console.log("authLogin", authLogin);

  return (
    <BrowserRouter>
      <Switch>
        {authLogin ? (
          <>
            <Route path="/dashboard" component={Dashboard} exact />
            <Route exact path="/About" component={About} />
          </>
        ) : (
          <Route path="/" component={Login} exact />
        )}

        <Route component={PageNotFound} />
      </Switch>
    </BrowserRouter>
  );
}
export default Routes;

تم التعديل في 22 يناير بواسطة Abdelrahman Mostafa10

Khaled Osama3 · 23 يناير

أولاً نحتاج دالة لتحقق حالة تسجيل الدخول authentication state:

function useAuth() {
  const [auth, setAuth] = useState(null);

  useEffect(() => {
    const storedAuth = localStorage.getItem('auth');
    setAuth(storedAuth);
  }, [])

  return auth;
}

ثم سنستخدم هذه الدالة في المكون Routes:

function Routes() {
  const auth = useAuth();

  return (
    <BrowserRouter>
      <Switch>
        {auth && <Route path="/dashboard" component={Dashboard}/>}
        
        <Route path="/login" component={Login}/>  
      </Switch>
    </BrowserRouter>
  )
}

و في مكون التسجيل login عند نجاح التسجيل نخزن الحالة في localStorage:

localStorage.setItem('auth', true);

و في مكون تسجيل الخروج logout نمحي الحالة من localStorage:

localStorage.removeItem('auth');

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

كيف يمكن إنشاء مسار محمي باستخدام react-router-dom الإصدار 6؟

السؤال

Abdelrahman Mostafa10

1 جواب على هذا السؤال

Recommended Posts

Khaled Osama3

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية