Protected Routes في React: حماية الصفحات خطوة بخطوة

في التطبيقات الحقيقية، ليست كل الصفحات متاحة للجميع. صفحة الحساب، لوحة التحكم، أو صفحة الدفع يجب أن تكون محمية. لهذا نستخدم Protected Routes.

ما هي Protected Routes في React؟

هي صفحات لا تظهر إلا إذا كان المستخدم مسجّل الدخول. إذا لم يكن كذلك، يتم توجيهه لصفحة تسجيل الدخول.

التعريف البسيط: حماية صفحة = التحقق من auth قبل عرضها.

الطريقة الأبسط: التحقق داخل المكوّن

import { Navigate } from "react-router-dom";

function Dashboard() {
  const token = localStorage.getItem("token");

  if (!token) {
    return <Navigate to="/login" />;
  }

  return <h2>لوحة التحكم</h2>;
}

إذا لم يكن هناك توكن، نوجّه المستخدم إلى صفحة تسجيل الدخول. وإذا وجدنا التوكن نعرض الصفحة مباشرة.

هذا الأسلوب بسيط لكنه يتكرر في كل صفحة تريد حمايتها. لذلك ننتقل للطريقة الثانية الأكثر تنظيمًا.

لاحظ أننا هنا اعتمدنا على localStorage فقط كإشارة سريعة لوجود جلسة. في التطبيقات الكبيرة يُفضَّل أن تعتمد على حالة Auth داخل Context أو مزود حالة حتى تكون كل الصفحات متزامنة مع حالة تسجيل الدخول بشكل فوري.

الطريقة الأفضل: مكوّن ProtectedRoute

import { Navigate } from "react-router-dom";

function ProtectedRoute({ children }) {
  const token = localStorage.getItem("token");

  if (!token) {
    return <Navigate to="/login" />;
  }

  return children;
}

هذا المكوّن يعمل كحارس. نلف به أي صفحة نريد حمايتها.

الفكرة هنا: بدل تكرار نفس شرط التوكن في كل صفحة، نضعه في مكوّن واحد ثم نستخدمه في كل المسارات المحمية.

أي صفحة محمية ستُمرَّر داخل children. إذا كان المستخدم مخوّلًا، نُعيد children كما هي. وإذا لم يكن مخوّلًا، نقطع العملية ونعيد توجيه المستخدم إلى /login.

استخدام ProtectedRoute مع Routes

<Route
  path="/dashboard"
  element={
    <ProtectedRoute>
      <Dashboard />
    </ProtectedRoute>
  }
/>

هنا قمنا بحماية مسار /dashboard. إذا كان المستخدم غير مسجّل، لن يرى الصفحة.

عند زيارة هذا المسار، React Router سيعرض أولاً ProtectedRoute.\n إذا سمح، سيعرض Dashboard. وإذا لم يسمح، سيعيد التوجيه إلى /login.

بهذه الطريقة يصبح لديك مسار واحد واضح لكل صفحة محمية، ويمكنك إضافة المزيد من الصفحات بنفس النمط بدون تكرار منطق التحقق.

ملاحظة مهمة: هذه الحماية من جهة الواجهة فقط. يجب أن يبقى التحقق الحقيقي في السيرفر عند كل طلب API.

ملاحظة أمنية مهمة

حماية الواجهة وحدها ليست كافية. يجب أن يكون السيرفر هو من يقرر إذا كان المستخدم مخولًا.

الأسئلة الشائعة — FAQ

ما هي Protected Routes في React؟

هي صفحات لا تُعرض إلا للمستخدمين المسجلين.

كيف أتحقق من تسجيل الدخول؟

عبر وجود توكن أو حالة auth داخل التطبيق.

ما فائدة Navigate؟

لإعادة توجيه المستخدم غير المصرح له إلى صفحة تسجيل الدخول.

هل يمكن حماية أكثر من صفحة بنفس المكوّن؟

نعم، بإنشاء مكوّن ProtectedRoute واستخدامه مع عدة مسارات.

هل حماية الواجهة وحدها كافية؟

لا، يجب حماية الـ API من السيرفر دائمًا.