Um ein Authentifizierungssystem mit React.js im Frontend und Express.js im Backend zu erstellen, müssen wir Folgendes implementieren:

• Frontend (React.js mit Pulsy): Anmeldung und Abmeldung verwalten, Benutzerauthentifizierungsstatus beibehalten und Token beibehalten.
• Backend (Express.js): Authentifizierungsendpunkte bereitstellen (z. B. Anmeldung, Abmeldung, Benutzervalidierung).

Schritt 1: Backend-Einrichtung (Express.js).

Beginnen wir mit dem Backend, das die Benutzerauthentifizierung und Token-Generierung übernimmt.

Erforderliche Pakete installieren

npm install express bcryptjs jsonwebtoken cors

Backend-Code (Express.js)

Erstellen Sie eine authController.js-Datei zur Handhabung der Authentifizierungslogik:

// 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' });
  }
};

Als nächstes erstellen Sie die Hauptdatei server.js zum Einrichten von 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: Authentifiziert einen Benutzer und gibt ein JWT-Token zurück.
• GET /api/validate: Validiert ein Token und gibt die Benutzerinformationen zurück.

Schritt 2: Frontend (React.js mit Pulsy)

Jetzt richten wir das Frontend mit React.js und Pulsy ein, um den Authentifizierungsstatus zu verwalten.

Erforderliche Pakete installieren

npm install axios pulsy

Pulsy Store-Setup

Wir werden einen Pulsy-Shop erstellen, um den Authentifizierungsstatus global zu verwalten.

// 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;
});

Dieser Speicher behält den Authentifizierungsstatus (Benutzer und Token) bei und wendet automatisch den Autorisierungsheader für authentifizierte Anfragen an.

Authentifizierungsfunktionen

Hilfsfunktionen erstellen, um Anmelde- und Validierungsanfragen zu verarbeiten:

// 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');
};

Schritt 3: Authentifizierungskomponenten erstellen

Jetzt erstellen wir die React-Komponenten für die Anmeldung und authentifizierte Ansichten.

Anmeldekomponente

// 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;

Authentifizierte Komponente

// 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;

Schritt 4: App-Komponente

In der App.js-Komponente möchten Sie prüfen, ob der Benutzer authentifiziert ist, und entweder die Anmeldung oder das Dashboard bedingt rendern.

// 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;

Schritt 5: Führen Sie die Anwendung aus

Da wir nun sowohl das Backend als auch das Frontend eingerichtet haben, können Sie die Anwendung ausführen.

1. Starten Sie den Express-Server:

   node server.js

1. Starten Sie das React-Frontend:

   npm start

Sobald beide laufen:

• Sie können http://localhost:3000 besuchen, um die Anmeldeseite anzuzeigen.
• Nach der Anmeldung wird das Authentifizierungstoken gespeichert und Sie werden zum Dashboard weitergeleitet.
• Wenn das Token gültig ist, bleiben Sie angemeldet, andernfalls werden Sie zurück zur Anmeldeseite weitergeleitet.

Zusammenfassung

Dieses Beispiel zeigt, wie man Pulsy in ein React-Authentifizierungssystem integriert, das von einer Express.js-API unterstützt wird. Pulsy hilft Ihnen bei der Verwaltung des globalen Status für die Authentifizierung, einschließlich der Persistenz des Authentifizierungstokens und der Benutzerdaten über Sitzungen hinweg, was es zu einem leistungsstarken und benutzerfreundlichen Tool zur Statusverwaltung macht.