لإنشاء نظام مصادقة باستخدام React.js على الواجهة الأمامية، Express.js على الواجهة الخلفية، نحتاج إلى تنفيذ ما يلي:

• الواجهة الأمامية (React.js مع Pulsy): التعامل مع تسجيل الدخول والخروج، والحفاظ على حالة مصادقة المستخدم، واستمرار الرموز المميزة.
• الخلفية (Express.js): توفير نقاط نهاية المصادقة (مثل تسجيل الدخول وتسجيل الخروج والتحقق من صحة المستخدم).

الخطوة 1: إعداد الواجهة الخلفية (Express.js).

لنبدأ بالواجهة الخلفية للتعامل مع مصادقة المستخدم وإنشاء الرمز المميز.

تثبيت الحزم المطلوبة

npm install express bcryptjs jsonwebtoken cors

كود الواجهة الخلفية (Express.js)

قم بإنشاء ملف authController.js للتعامل مع منطق المصادقة:

// authController.js
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');

// Mock user data (in production, you would use a real database)
const users = [
  {
    id: 1,
    username: 'john',
    password: '$2a$10$O1s8iLKRLPbPqhc1uTquLO.xODTC1U/Z8xGoEDU6/Dc0PAQ3MkCKy', // hashed password for 'password123'
  },
];

// JWT Secret
const JWT_SECRET = 'supersecretkey';

exports.login = (req, res) => {
  const { username, password } = req.body;

  const user = users.find((u) => u.username === username);

  if (!user) {
    return res.status(401).json({ error: 'Invalid credentials' });
  }

  bcrypt.compare(password, user.password, (err, isMatch) => {
    if (isMatch) {
      // Create a token
      const token = jwt.sign({ id: user.id, username: user.username }, JWT_SECRET, { expiresIn: '1h' });
      return res.json({ token });
    } else {
      return res.status(401).json({ error: 'Invalid credentials' });
    }
  });
};

exports.validateToken = (req, res) => {
  const token = req.header('Authorization').replace('Bearer ', '');

  if (!token) {
    return res.status(401).json({ error: 'No token provided' });
  }

  try {
    const decoded = jwt.verify(token, JWT_SECRET);
    res.json({ user: { id: decoded.id, username: decoded.username } });
  } catch (err) {
    res.status(401).json({ error: 'Invalid token' });
  }
};

بعد ذلك، قم بإنشاء ملف server.js الرئيسي لإعداد Express:

// server.js
const express = require('express');
const cors = require('cors');
const { login, validateToken } = require('./authController');

const app = express();
app.use(express.json());
app.use(cors());

// Authentication routes
app.post('/api/login', login);
app.get('/api/validate', validateToken);

// Start the server
const PORT = 5000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

• POST /api/login: لتوثيق المستخدم وإرجاع رمز JWT المميز.
• GET /api/validate: التحقق من صحة الرمز المميز وإرجاع معلومات المستخدم.

الخطوة 2: الواجهة الأمامية (React.js مع Pulsy)

الآن لنقم بإعداد الواجهة الأمامية باستخدام React.js وPulsy للتعامل مع حالة المصادقة.

تثبيت الحزم المطلوبة

npm install axios pulsy

إعداد متجر نبضي

سنقوم بإنشاء متجر Pulsy لإدارة حالة المصادقة عالميًا.

// authStore.js
import { createStore, addMiddleware } from 'pulsy';
import axios from 'axios';

// Create a store to hold the user and token
createStore('auth', {
  user: null,
  token: null,
}, { persist: true }); // Persist the auth state in localStorage

// Middleware to add Authorization header for authenticated requests
addMiddleware('auth', (nextValue, prevValue, storeName) => {
  if (nextValue.token) {
    axios.defaults.headers.common['Authorization'] = `Bearer ${nextValue.token}`;
  } else {
    delete axios.defaults.headers.common['Authorization'];
  }
  return nextValue;
});

سيحتفظ هذا المتجر بحالة المصادقة (المستخدم والرمز المميز) وسيطبق تلقائيًا رأس التفويض للطلبات التي تمت مصادقتها.

وظائف المصادقة

إنشاء وظائف مساعدة للتعامل مع طلبات تسجيل الدخول والتحقق من الصحة:

// authService.js
import { setStoreValue } from 'pulsy';
import axios from 'axios';

const API_URL = 'http://localhost:5000/api';

export const login = async (username, password) => {
  try {
    const response = await axios.post(`${API_URL}/login`, { username, password });
    const { token } = response.data;

    // Set token and user info in Pulsy store
    setStoreValue('auth', { token, user: { username } });

    return true;
  } catch (error) {
    console.error('Login failed', error);
    return false;
  }
};

export const validateToken = async () => {
  try {
    const response = await axios.get(`${API_URL}/validate`);
    const user = response.data.user;

    // Update the store with the user info
    setStoreValue('auth', { user, token: localStorage.getItem('auth_token') });
    return true;
  } catch (error) {
    console.error('Token validation failed', error);
    return false;
  }
};

export const logout = () => {
  setStoreValue('auth', { user: null, token: null });
  localStorage.removeItem('pulsy_auth');
};

الخطوة 3: إنشاء مكونات المصادقة

الآن لنقم بإنشاء مكونات React لتسجيل الدخول وطرق العرض المصادق عليها.

مكون تسجيل الدخول

// Login.js
import React, { useState } from 'react';
import { login } from './authService';

const Login = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState('');

  const handleLogin = async (e) => {
    e.preventDefault();
    const success = await login(username, password);
    if (!success) {
      setError('Invalid credentials. Try again.');
    }
  };

  return (
    

      
Login
      

         setUsername(e.target.value)}
          placeholder="Username"
          required
        />
         setPassword(e.target.value)}
          placeholder="Password"
          required
        />
        Login
      
      {error && 
{error}
}
    
  );
};

export default Login;

مكون مصادق عليه

// Dashboard.js
import React from 'react';
import { usePulsy } from 'pulsy';
import { logout } from './authService';

const Dashboard = () => {
  const [auth] = usePulsy('auth');

  const handleLogout = () => {
    logout();
    window.location.reload(); // Simple page refresh to redirect to login
  };

  return (
    

      
Welcome, {auth.user.username}!
      Logout
    
  );
};

export default Dashboard;

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

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

// App.js
import React, { useEffect } from 'react';
import { usePulsy } from 'pulsy';
import { validateToken } from './authService';
import Login from './Login';
import Dashboard from './Dashboard';

function App() {
  const [auth] = usePulsy('auth');

  useEffect(() => {
    // Check token validity on app load
    if (auth.token) {
      validateToken();
    }
  }, [auth.token]);

  return (
    

      {auth.user ?  : }
    
  );
}

export default App;

الخطوة 5: قم بتشغيل التطبيق

الآن بعد أن قمنا بإعداد كل من الواجهة الخلفية والواجهة الأمامية، يمكنك تشغيل التطبيق.

1. بدء تشغيل الخادم السريع:

   node server.js

1. بدء واجهة React الأمامية:

   npm start

بمجرد تشغيل كلاهما:

• يمكنك زيارة http://localhost:3000 لرؤية صفحة تسجيل الدخول.
• بعد تسجيل الدخول، سيتم حفظ رمز المصادقة، وستتم إعادة توجيهك إلى لوحة التحكم.
• إذا كان الرمز صالحًا، فستظل مسجلاً للدخول، وإلا ستتم إعادة توجيهك مرة أخرى إلى صفحة تسجيل الدخول.

ملخص

يوضح هذا المثال كيفية دمج Pulsy مع نظام مصادقة React المدعوم بواجهة برمجة تطبيقات Express.js. يساعدك Pulsy على إدارة الحالة العالمية للمصادقة، بما في ذلك استمرارية رمز المصادقة وبيانات المستخدم عبر الجلسات، مما يجعلها أداة إدارة حالة قوية وسهلة الاستخدام.