Das Backend verstehen

Bevor wir mit der Entwicklung des Frontends beginnen, ist es wichtig, das Backend zu verstehen, mit dem wir interagieren werden. Dieser Abschnitt gibt Ihnen einen kompakten Überblick über die Architektur, Routen und Funktionen des bereitgestellten Backends.

Authentifizierung temporär deaktivieren

Deaktivieren Sie temporär die Authentifizierung für die Produkte-Endpunkte, indem Sie in der Datei product.routes.js folgende Zeile auskommentieren:

// router.use(authenticateToken);

Architektur

Das Backend ist eine moderne Node.js-Anwendung mit folgender Struktur:

• Directoryproduct-management-backend/

  • Directorymongo-init/ # Skripte für die MongoDB-Initialisierung

    • …
  • Directorysrc/

    • Directorycontrollers/ # Logik für die verschiedenen Endpunkte

      • …
    • Directorymiddleware/ # Middleware-Funktionen (Authentifizierung etc.)

      • …
    • Directorymodels/ # Datenmodelle für MongoDB

      • …
    • Directoryroutes/ # Routen-Definitionen

      • …
    • Directoryutils/ # Hilfsfunktionen

      • …
    • app.js # Express-App-Konfiguration
    • server.js # Server-Startpunkt
  • .env.sample # Vorlage für Umgebungsvariablen
  • docker-compose.yaml # Docker-Konfiguration
  • package.json # Abhängigkeiten und Skripte

Datenmodelle

Das Backend verwendet zwei Hauptdatenmodelle:

1. Produkt-Modell (Product)

{
  title: String,          // Titel des Produkts
  description: String,    // Beschreibung des Produkts
  price: Number,          // Preis des Produkts
  active: Boolean,        // Status (aktiv/inaktiv)
  createdAt: Date         // Erstellungsdatum
}

2. Benutzer-Modell (User)

{
  email: String,          // E-Mail-Adresse (eindeutig)
  firstName: String,      // Vorname
  lastName: String,       // Nachname
  password: String,       // Gehashtes Passwort
  createdAt: Date         // Erstellungsdatum
}

API-Routen und Controller

Das Backend bietet folgende API-Endpunkte:

Authentifizierungs-Routen

Endpunkt	Methode	Funktion	Beschreibung
/auth/login	POST	login	Benutzeranmeldung, generiert JWT-Token
/auth/register	POST	register	Registrierung neuer Benutzer
/auth/logout	POST	logout	Benutzerabmeldung
/auth/me	GET	checkAuth	Prüfung des Auth-Status (geschützt)

Der Auth-Controller (auth.controller.js) implementiert die JWT-Authentifizierung mit folgenden Hauptfunktionen:

• Login: Überprüft Anmeldedaten, generiert JWT-Token
• Register: Erstellt neuen Benutzer mit gehashtem Passwort
• CheckAuth: Verifiziert Token und gibt Benutzerinfo zurück

Produkt-Routen

Endpunkt	Methode	Funktion	Beschreibung
/products	GET	list	Liste aller Produkte
/products/:id	GET	get	Details eines Produkts
/products	POST	create	Neues Produkt erstellen
/products/:id	PUT	update	Produkt aktualisieren
/products/:id	DELETE	remove	Produkt löschen

Der Produkt-Controller (product.controller.js) implementiert CRUD-Operationen mit folgenden Hauptfunktionen:

• List: Ruft alle Produkte ab, unterstützt Paginierung und Filterung
• Get: Ruft ein einzelnes Produkt anhand seiner ID ab
• Create: Erstellt ein neues Produkt
• Update: Aktualisiert ein bestehendes Produkt
• Remove: Löscht ein Produkt aus der Datenbank

Default-Routen

Endpunkt	Methode	Funktion	Beschreibung
/	GET	get	Root-Endpunkt mit API-Info
/health	GET	healthCheck	Status-Check des Servers

App-Konfiguration

In der app.js Datei wird Express konfiguriert und die verschiedenen Routen eingebunden:

import express from 'express'
import cors from 'cors'
import mongoose from 'mongoose'
import defaultRoutes from './routes/default.routes.js'
import productRoutes from './routes/product.routes.js'
import authRoutes from './routes/auth.routes.js'
import cookieParser from 'cookie-parser'

const app = express()

// Middleware
app.use(cors({
  origin: process.env.CORS_ORIGIN || '*',
  credentials: true
}))
app.use(express.json())
app.use(express.urlencoded({ extended: true }))
app.use(cookieParser())

// Routes
app.use('/', defaultRoutes)
app.use('/products', productRoutes)
app.use('/auth', authRoutes)

export default app

Middleware

Das Backend verwendet verschiedene Middleware-Funktionen:

Authentifizierungs-Middleware

Die Datei auth.js enthält die authenticateToken-Middleware, die:

• Den JWT-Token aus dem Authorization-Header extrahiert
• Den Token validiert
• Bei erfolgreicher Validierung den Benutzer im Request-Objekt speichert
• Bei fehlgeschlagener Validierung einen 401-Fehler zurückgibt

Diese Middleware schützt alle Produkt-Routen, indem sie bei jeder Anfrage überprüft, ob ein gültiger JWT-Token vorhanden ist.

Umgebungsvariablen

Die Anwendung verwendet folgende Umgebungsvariablen (definiert in .env):

• PORT: Server-Port (Standard: 3000)
• MONGODB_URI: MongoDB-Verbindungsstring
• JWT_SECRET: Geheimer Schlüssel für JWT-Signierung
• JWT_EXPIRATION: Ablaufzeit für JWT-Tokens
• CORS_ORIGIN: Erlaubte Ursprünge für CORS

Technische Details

Das Backend nutzt folgende Haupttechnologien:

• Express.js: Web-Framework für die API
• MongoDB: NoSQL-Datenbank für die Datenspeicherung
• Mongoose: ODM (Object Document Mapper) für MongoDB
• bcrypt: Für sichere Passwort-Hashing
• jsonwebtoken: Für die JWT-Implementierung
• cors: Für Cross-Origin Resource Sharing
• cookie-parser: Für die Verarbeitung von Cookies

Authentifizierungsfluss

1. Registrierung: Der Benutzer sendet E-Mail und Passwort, das Backend hasht das Passwort und speichert den Benutzer.
2. Login: Der Benutzer sendet Anmeldedaten, das Backend überprüft diese und generiert ein JWT-Token.
3. Geschützte Anfragen: Das Frontend sendet das Token im Authorization-Header mit jeder Anfrage.
4. Logout: Das Backend löscht das Cookie und der Benutzer hat keinen Zugriff mehr.

Fehlerbehandlung

Das Backend verwendet ein konsistentes Fehlerbehandlungsschema:

• HTTP-Statuscodes für verschiedene Fehlerarten (401 für Authentifizierungsfehler, 404 für nicht gefundene Ressourcen usw.)
• JSON-Antworten mit success-Flag und message-Feld für Fehlerbeschreibungen

Docker-Integration

Die docker-compose.yaml-Datei konfiguriert folgenden Service:

• MongoDB: Verwendet das offizielle MongoDB-Image und initialisiert die Datenbank mit Testdaten

Verbindung zum Frontend

Wenn Sie das Frontend entwickeln, werden Sie API-Anfragen an diese Endpunkte senden. Für eine lokale Entwicklung müssten die Anfragen an http://localhost:3000 gesendet werden (oder den Port, den Sie in der .env-Datei konfiguriert haben), gefolgt vom jeweiligen Endpunkt (z.B. http://localhost:3000/auth/login).

Zusammenfassung

Das Backend bietet eine solide Grundlage für unsere React-Anwendung mit:

• Vollständiger Benutzerauthentifizierung
• CRUD-Operationen für Produkte
• Express-API mit klar strukturierten Routen
• Sicherheitsfunktionen wie JWT-Authentifizierung und Passwort-Hashing
• Docker-Integration für einfache Entwicklung

Im nächsten Abschnitt werden wir mit der Einrichtung unseres React-Frontends beginnen, das mit diesem Backend kommunizieren wird.