تحقق من المصادقة في تطبيق React.js باستخدام react-router

في تطبيقك React.js الذي تستخدم فيه react-router بالإصدار 2.8.1 وباستخدام تركيبات اللغة ES6، تواجهك تحدي في إعداد دالة تعترض جميع الانتقالات بين الصفحات للتحقق مما إذا كان المستخدم بحاجة إلى تسجيل الدخول أولاً.

في الوقت الحالي، تقوم بتقديم تركيبة رئيسية بسيطة للتطبيق، حيث يتم تحميل مكونات الصفحات عبر مسارات محددة مثل login وlogout وsubject وall. ومع ذلك، تواجه صعوبة في إضافة دالة تعترض الانتقالات للتحقق من الهوية قبل هبوط المستخدم على الصفحة المطلوبة.

لحل هذه المشكلة، يمكنك استخدام ميزة الوسيط (middleware) المتاحة في react-router لإنشاء وظيفة تفاعلية تتحقق من حالة المصادقة قبل تحميل أي صفحة. لكن من الهام ان نلاحظ أن الوسيط لا يأتي مباشرة مدمجًا مع react-router 2، لكن يمكن تحقيق الغرض من خلال استخدام وظائف lifecycle لمكونات React.

أحد الطرق لتحقيق هذا الهدف هو من خلال إنشاء مكون عالي المستوى يحتوي على جميع مكونات التطبيق. يمكن استخدام دالة lifecycle المسماة componentDidMount في هذا المكون للتحقق من حالة المصادقة قبل تحميل أي صفحة. في حال عدم تسجيل الدخول، يمكن إعادة توجيه المستخدم إلى صفحة تسجيل الدخول.

اليك كيفية تطبيق هذه الفكرة:

javascriptCopy code
import React from 'react';
import { Router, Route, hashHistory, Redirect } from 'react-router';

class App extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         isAuthenticated: false // تعيين القيمة الافتراضية لحالة المصادقة
      };
   }

   componentDidMount() {
      // تحقق من حالة المصادقة هنا وتحديث الحالة بناءً على ذلك
      const isAuthenticated = this.checkAuthentication();
      this.setState({ isAuthenticated });
   }

   checkAuthentication() {
      // قم بتنفيذ الاستعلام عن حالة المصادقة، مثلا استخدم local storage أو JWT token
      // إرجاع true إذا كان المستخدم مصادقًا و false إذا لم يكن
      // هنا سيكون مثال على كيفية فحص الحالة باستخدام local storage:
      return localStorage.getItem('isLoggedIn') === 'true';
   }

   render() {
      // إعادة التوجيه إلى صفحة تسجيل الدخول إذا لم يكن المستخدم مصادقًا
      if (!this.state.isAuthenticated) {
         return <Redirect to="/login" />;
      }

      // إعادة عرض التطبيق كما هو في حالة المصادقة
      return (
         <Router history={hashHistory}>
            <Route path="/" component={AppMain}>
               <Route path="login" component={Login}/>
               <Route path="logout" component={Logout}/>
               <Route path="subject" component={SubjectPanel}/>
               <Route path="all" component={NotesPanel}/>
            Route>
         Router>
      );
   }
}

export default App;

في هذا الكود، يتم استخدام مكون App كمكون رئيسي للتطبيق، حيث يتم في دالة componentDidMount التحقق من حالة المصادقة وتحديث الحالة وفقًا لذلك. إذا لم يكن المستخدم مصادقًا، سيتم إعادة توجيهه تلقائيًا إلى صفحة تسجيل الدخول باستخدام المكون Redirect. وفي حالة المصادقة، ستتم عرض مكونات التطبيق كما هو معتاد.

هذا النهج يسمح لك بتطبيق تحقق المصادقة بشكل فعال قبل تحميل أي صفحة في التطبيق الخاص بك. يمكنك تعديل دالة checkAuthentication لتناسب احتياجات تطبيقك بما في ذلك استخدام آليات مختلفة مثل JWT tokens أو أي نظام مصادقة آخر.

بالطبع، لنكمل المقال بمزيد من التفاصيل والشروحات لتوضيح الفكرة بشكل أفضل.

في الكود السابق، تم استخدام مكون App كمكون رئيسي للتطبيق، وتم تنفيذ دالة componentDidMount للتحقق من حالة المصادقة وتحديث الحالة وفقًا لذلك. هذا يعني أن التحقق من المصادقة يحدث فور تحميل التطبيق.

لكن يمكن أيضًا تحديث حالة المصادقة في أماكن أخرى، مثل عند تسجيل الدخول أو تسجيل الخروج. بعد تحديث الحالة، ستقوم React بإعادة تقييم العرض وتحديثه وفقًا للتغييرات.

فيما يلي كيفية تحديث الحالة عند تسجيل الدخول وتسجيل الخروج:

javascriptCopy code
// في مكون تسجيل الدخول (Login)
login() {
   // عملية تسجيل الدخول هنا

   // بعد نجاح تسجيل الدخول، حدث حالة المصادقة
   this.setState({ isAuthenticated: true });

   // يمكنك أيضًا توجيه المستخدم إلى الصفحة التي كان يحاول الوصول إليها بعد تسجيل الدخول
   this.props.history.push('/'); // أو أي مسار آخر
}

// في مكون تسجيل الخروج (Logout)
logout() {
   // عملية تسجيل الخروج هنا

   // بعد نجاح تسجيل الخروج، حدث حالة المصادقة
   this.setState({ isAuthenticated: false });

   // يمكنك أيضًا توجيه المستخدم إلى الصفحة الرئيسية أو أي صفحة أخرى بعد تسجيل الخروج
   this.props.history.push('/');
}

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

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

بهذه الطريقة، يمكنك تطبيق تحقق المصادقة بشكل فعال ومرن في تطبيقك باستخدام react-router ومكونات React.