كيفية تنفيذ المسارات authentication في react router

مرحباً بك: 
يمكنك استخدام هذه المكتبة فهي توفر لك المرونة في فعل ما تريد protected-react-routes-generator
 ولكن ستقوم بعمل configuration خاصة حيث أنك ستعطيها array وهي تقوم بإعادة ال routes لك تابع المثال 

// هذا ملف ال navigation 

import React from 'react';
import { Switch } from 'react-router-dom';
import { ConnectedRouter } from 'connected-react-router';
// Utility
import RoutesConfiguration from 'protected-react-routes-generator';
// Routes
import CoursePayment from '../Payment/Course';
import PaymentResult from '../Payment/PaymentResult';


function AppNavigation({ auth }) {
    // هذا الأوبجيكت يقوم بإرجاع routes 
  // ستكون متاحة فقط للأشخاص الذين سجلو دخول 
    const authorizedStructure = {
      // login وإذا قام أحد الأشخاص الذين قامو بتسجيل الدخول عبر كتابة المسار سيتم توجيهه لل 
    fallbackPath: '/login',
    routes: [
      { path: '/payment/result', component: <PaymentResult /> },
      { path: '/course-payment/:id', component: <CoursePayment /> },
      // في حالتك 
      { path: '/protected', component: <Protected /> },
    ]
  };

  // هذا الأوبجيكت يقوم بإرجاع routes 
  // ستكون متاحة فقط للأشخاص الذين لم يسجلو دخول 
  const unAuthorizedStructure = {
    // dashboard وإذا قام أحد الأشخاص الذين قامو بتسجيل الدخول عبر كتابة المسار سيتم توجيهه لل 
    fallbackPath: '/dashboard',  
    routes: [
      { path: '/signup', component: <SignUp /> },
      { path: '/login/:resetAvailable?', component: <Login /> },
    ]
  };

  // هذا الأوبجيكت يقوم بإرجاع routes 
  // ستكون متاحة لجميع الأشخاص سواء مسجل دخول أم لا 
  // وكأمثلة 
  const anonymousStructure = { 
    routes: [
      { path: '/', component: <Home /> },
      { path: '/home', component: <Home /> },
      { path: '/faqs', component: <Faqs /> },
      { path: '/404', component: <PageNotFound /> },
      // في حالتك 
      { path: '/public', component: <Public /> },
    ]
  };

  return(
    <ConnectedRouter history={history}>
      <Switch>
    	// هذه الدالة تأخذ جميع ما سبق ثم تقوم بإعادة الroutes النهائية
        {RoutesConfiguration({
          isAuthenticated: auth.isAuthenticated, // هذه مهمه حيث تعطيه القيمة التي بناءاً عليها هل الشخص مسجل دخول أم لا
          anonymousStructure,
          authorizedStructure,
          unAuthorizedStructure,
          fallbackComponent: <PageNotFound />
        })}
      </Switch>
    </ConnectedRouter>
  );
}

const mapStateToProps = store => ({
  auth: store.auth
});

export default connect(mapStateToProps)(AppNavigation);

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

ولتنفيذ ذلك:

في البدايه نحتاج الى ان شاء  private route component حتى يسهل علينا العمل 
وظيفة هذا المكون  ان يقوم بعملية تأكيد هل هذا اليوزر مسجل ويفحص هل هناك توكن مسجل في localStorage ام لا  إذا وجده يعرض له الكومبوننت والا فيقوم بتحويله الى مسار أخر تحدده وهنا هو صفحة تسجيل الدخول.

function PrivateRoute({ children, ...rest }) {
  const auth = // هنا فانكشن تقوم بفحص هل اليوز مسجل ام لا بفحصل اللوكال ستورج والتأكد من أن التوكن صحيح 
        
  return (
    <Route {...rest} render={(props) =>
        auth ? (children) :
        (<Redirect to={{ pathname: '/login', state: { from: props.location } }} />)
      }
    />
  )
}

بعد ذلك يمكنك استخدامه داخل ال Router كالاتي

  <PrivateRoute path='/protected'>
               <Protected/> //هنا الكمبوننت التى تتطلب تسجل الدخول
  </PrivateRoute>

بدلا من 

<Route path="/protected" component={Protected}/> 

وبهذا يمكنك استخدام المكون PrivateRoute مع اي مسار تود حمايته.