كيف يمكنني استخدام React js لعرض واجهة تسجيل الدخول أولاً في تطبيق مدونة وتوجيه العضو الجديد إلى صفحة تسجيل الدخول؟

الأمر ممكن تنفيذه من خلال عدة طرق، وإحدى الطرق هي استخدام RouteGuar، وهي  هي ميزة في React Router تمكنك من حظر الوصول إلى مسار معين اعتمادًا على حالة معينة.

وبالتالي حظر الوصول إلى جميع المسارات باستثناء صفحة تسجيل الدخول.

إليك مثال:

import { useState, useEffect } from "react";
import { Route, Redirect } from "react-router-dom";

const AuthRouteGuard = ({ component: Component, path, ...rest }) => {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    fetch("/api/user")
      .then((response) => response.json())
      .then((data) => setIsLoggedIn(data.loggedIn));
  }, []);

  return (
    <Route
      path={path}
      render={(props) => {
        if (isLoggedIn) {
          return <Component {...props} />;
        } else {
          return <Redirect to="/login" />;
        }
      }}
      {...rest}
    />
  );
};

نستخدم useState للحفاظ على حالة تسجيل الدخول للمستخدم.

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

السلام عليكم ,
 

يمكنك اتباع الخطوات التالية:

- إنشاء صفحة تسجيل الدخول:

قم بإنشاء مكون في React يُظهر واجهة تسجيل الدخول.

استخدم حالة الدخول لتحديد ما إذا كان المستخدم مسجل الدخول أم لا.

- تحديد مسار لتسجيل الدخول:

استخدم React Router لتحديد مسار لصفحة تسجيل الدخول.

في مكون الأمان (الذي يتحكم في مسألة الدخول)، قم بتحديد السلوك المناسب بناءً على حالة الدخول.

- توجيه المستخدم غير المسجلين:

عندما يحاول المستخدم الوصول إلى صفحة المدونة، تحقق من حالة تسجيل الدخول.

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

- تحديث حالة تسجيل الدخول:

بعد تسجيل الدخول بنجاح، قم بتحديث حالة تسجيل الدخول في التطبيق.

يمكنك استخدام سياق (Context) للتحكم في حالة تسجيل الدخول عبر مكونات التطبيق.

- تخزين حالة تسجيل الدخول:

للحفاظ على حالة تسجيل الدخول بين جلسات التصفح، يمكنك استخدام ميزات التخزين المحلي مثل localStorage أو sessionStorage.

قد يكون هذا شكلًا عامًا لهيكل التطبيق:


 

// AuthContext.js

import React, { createContext, useContext, useState, useEffect } from 'react';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [isLoggedIn, setLoggedIn] = useState(() => {
    // استرجاع قيمة isLoggedIn من localStorage عند تحميل التطبيق
    return localStorage.getItem('isLoggedIn') === 'true';
  });

  useEffect(() => {
    // حفظ قيمة isLoggedIn في localStorage عندما تتغير
    localStorage.setItem('isLoggedIn', isLoggedIn.toString());
  }, [isLoggedIn]);

  const login = () => {
    setLoggedIn(true);
  };

  const logout = () => {
    setLoggedIn(false);
  };

  return (
    <AuthContext.Provider value={{ isLoggedIn, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => {
  const context = useContext(AuthContext);
  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }
  return context;
};