docs: Correct migration guide - ALL routes changed, not just admin

Critical corrections to frontend/MIGRATION-GUIDE.md:
- Emphasize ALL API routes now have consistent /api prefix
- Old routes had inconsistent prefixes (some with /api, some without)
- List specific files with wrong routes that need fixing:
  * ModerationGroupsPage.js: /groups/* → /api/admin/groups/*
  * ModerationGroupImagesPage.js: /moderation/groups/* → /api/admin/groups/*
  * PublicGroupImagesPage.js: /groups/* → /api/groups/*
- Add 3-phase checklist: Route Prefixes → Authentication → Testing
- Provide grep commands to find ALL fetch/axios calls
- Make clear this affects the entire frontend, not just admin features

Migration effort estimate increased: 3-4 hours (route audit + auth)
This commit is contained in:
Matthias Lotz 2025-11-16 18:25:32 +01:00
parent 36e7302677
commit 7cb264820e

View File

@ -1,16 +1,61 @@
# Frontend Migration Guide - Admin API Authentication # Frontend Migration Guide - API Umstrukturierung
**Datum:** 16. November 2025 **Datum:** 16. November 2025
**Betrifft:** Alle Admin-API-Aufrufe im Frontend **Betrifft:** ALLE API-Aufrufe im Frontend
**Status:** ⚠️ Aktion erforderlich **Status:** ⚠️ Aktion erforderlich - ALLE Routen prüfen!
--- ---
## 🔒 Was hat sich geändert? ## <EFBFBD> BREAKING CHANGE: Konsistente `/api` Prefixes
Alle Admin-Endpoints (`/api/admin/*`) benötigen jetzt **Bearer Token Authentication**. **ALLE API-Routen haben sich geändert!**
### Betroffene Endpoints ### Vorher (inkonsistent):
```javascript
// Teils mit /api
fetch('/api/upload/batch')
fetch('/api/manage/xyz')
// Teils OHNE /api - FALSCH!
fetch('/groups/123')
fetch('/groups/123/approve')
fetch('/moderation/groups/123')
```
### Jetzt (konsistent):
```javascript
// ALLE Routen mit /api Prefix
fetch('/api/upload/batch')
fetch('/api/manage/xyz')
fetch('/api/groups/123') // Public
fetch('/api/admin/groups/123/approve') // Admin
fetch('/api/admin/groups/123') // Admin
```
---
## 🔒 Admin API Authentication
Alle Admin-Endpoints (`/api/admin/*` und `/api/system/*`) benötigen jetzt **Bearer Token Authentication**.
### Route-Hierarchie
1. **Public API**: `/api/*`
- Öffentlich zugänglich
- `/api/upload`, `/api/groups`, `/api/download`, etc.
2. **Management API**: `/api/manage/*`
- Token-basiert (UUID aus Upload-Response)
- Für Gruppenbesitzer
3. **Admin API**: `/api/admin/*` ⚠️ **BEARER TOKEN ERFORDERLICH**
- Moderation, Logs, Consents
- `/api/admin/groups`, `/api/admin/deletion-log`, etc.
4. **System API**: `/api/system/migration/*` ⚠️ **BEARER TOKEN ERFORDERLICH**
- Wartungsfunktionen
### Betroffene Admin-Endpoints
- `/api/admin/groups` - Gruppen auflisten - `/api/admin/groups` - Gruppen auflisten
- `/api/admin/groups/:id` - Gruppe abrufen - `/api/admin/groups/:id` - Gruppe abrufen
@ -34,7 +79,31 @@ Alle Admin-Endpoints (`/api/admin/*`) benötigen jetzt **Bearer Token Authentica
## 📝 Erforderliche Änderungen ## 📝 Erforderliche Änderungen
### 1. Environment Variable hinzufügen ### 1. ALLE API-Routen prüfen und `/api` hinzufügen
**Schritt 1**: Finde alle API-Aufrufe im Frontend:
```bash
# Alle fetch/axios Aufrufe finden
grep -r "fetch\(" frontend/src/
grep -r "axios\." frontend/src/
```
**Schritt 2**: Prüfe jede Route und füge `/api` Prefix hinzu (falls fehlend):
```javascript
// ❌ FALSCH (alte Routen)
fetch('/groups/123')
fetch('/groups/123/approve')
fetch('/moderation/groups/123')
// ✅ RICHTIG (neue Routen)
fetch('/api/groups/123') // Public
fetch('/api/admin/groups/123/approve') // Admin (+ Bearer Token!)
fetch('/api/admin/groups/123') // Admin (+ Bearer Token!)
```
### 2. Environment Variable für Admin Token hinzufügen
```bash ```bash
# frontend/.env oder frontend/.env.local # frontend/.env oder frontend/.env.local
@ -52,7 +121,7 @@ node -e "console.log(require('crypto').randomBytes(32).toString('hex'))"
**⚠️ Wichtig**: Gleiches Token in Backend `.env` als `ADMIN_API_KEY` eintragen! **⚠️ Wichtig**: Gleiches Token in Backend `.env` als `ADMIN_API_KEY` eintragen!
### 2. API-Aufrufe anpassen ### 3. API-Aufrufe für Admin-Endpoints anpassen
#### Vorher (ohne Auth): #### Vorher (ohne Auth):
```javascript ```javascript
@ -133,36 +202,72 @@ try {
## 🔍 Betroffene Dateien finden ## 🔍 Betroffene Dateien finden
Such nach allen Admin-API-Aufrufen: ### Alle API-Calls prüfen (KRITISCH!)
```bash ```bash
cd frontend/src cd frontend/src
# Alle Admin-API-Calls finden: # ALLE API-Calls finden (fetch + axios):
grep -r "/api/admin" --include="*.js" --include="*.jsx" grep -rn "fetch(" --include="*.js" --include="*.jsx"
grep -rn "axios\." --include="*.js" --include="*.jsx"
# Alle Fetch-Calls in spezifischen Komponenten: # Spezifisch nach alten Routen OHNE /api suchen:
grep -r "fetch.*admin" Components/Pages/ grep -rn "fetch('/groups" --include="*.js"
grep -rn "fetch('/moderation" --include="*.js"
# Admin-API-Calls finden:
grep -rn "/api/admin" --include="*.js" --include="*.jsx"
``` ```
**Wahrscheinlich betroffene Komponenten:** **Bekannte betroffene Dateien:**
### Routen ohne `/api` Prefix (MÜSSEN GEFIXT WERDEN):
- `Components/Pages/ModerationGroupsPage.js` - `Components/Pages/ModerationGroupsPage.js`
- ❌ `/groups/${groupId}/approve` → ✅ `/api/admin/groups/${groupId}/approve`
- ❌ `/groups/${groupId}` (DELETE) → ✅ `/api/admin/groups/${groupId}`
- ❌ `/api/social-media/platforms` → ✅ `/api/admin/social-media/platforms`
- `Components/Pages/ModerationGroupImagesPage.js` - `Components/Pages/ModerationGroupImagesPage.js`
- `Components/ComponentUtils/ConsentManager.js` (wenn im moderate-Modus) - ❌ `/moderation/groups/${groupId}` → ✅ `/api/admin/groups/${groupId}`
- `services/reorderService.js` (Admin-Reorder)
- Jede andere Komponente, die Admin-Funktionen aufruft - `Components/Pages/PublicGroupImagesPage.js`
- ❌ `/groups/${groupId}` → ✅ `/api/groups/${groupId}`
### Admin-Endpoints (benötigen Bearer Token):
- `Components/Pages/ModerationGroupsPage.js` - Alle Admin-Calls
- `Components/Pages/ModerationGroupImagesPage.js` - Gruppe laden + Bilder löschen
- `Components/ComponentUtils/DeletionLogSection.js` - Deletion Log
- `Components/ComponentUtils/ConsentManager.js` - Consent Export (wenn Admin)
- `services/reorderService.js` - Admin-Reorder (wenn vorhanden)
### Public/Management Endpoints (nur Pfad prüfen):
- `Utils/batchUpload.js` - Bereits korrekt (`/api/...`)
- `Components/Pages/ManagementPortalPage.js` - Bereits korrekt (`/api/manage/...`)
- `Utils/sendRequest.js` - Bereits korrekt (axios)
--- ---
## ✅ Checkliste ## ✅ Checkliste
### Phase 1: Route-Prefixes (ALLE Dateien)
- [ ] Alle `fetch()` und `axios` Calls gefunden (grep)
- [ ] Alle Routen ohne `/api` Prefix identifiziert
- [ ] `/api` Prefix zu Public-Routen hinzugefügt (`/api/groups`, `/api/upload`)
- [ ] Admin-Routen auf `/api/admin/*` geändert
- [ ] Management-Routen auf `/api/manage/*` geprüft (sollten schon korrekt sein)
### Phase 2: Admin Authentication
- [ ] `REACT_APP_ADMIN_API_KEY` in `.env` hinzugefügt - [ ] `REACT_APP_ADMIN_API_KEY` in `.env` hinzugefügt
- [ ] Token im Backend als `ADMIN_API_KEY` konfiguriert - [ ] Token im Backend als `ADMIN_API_KEY` konfiguriert
- [ ] Zentrale `adminFetch` Funktion erstellt - [ ] Zentrale `adminFetch` Funktion erstellt
- [ ] Alle Admin-API-Calls gefunden (grep) - [ ] Authorization Header zu ALLEN `/api/admin/*` Calls hinzugefügt
- [ ] Authorization Header zu allen Admin-Calls hinzugefügt - [ ] Authorization Header zu `/api/system/*` Calls hinzugefügt (falls vorhanden)
- [ ] 403 Error Handling implementiert - [ ] 403 Error Handling implementiert
- [ ] Frontend lokal getestet
### Phase 3: Testing & Deployment
- [ ] Frontend lokal getestet (alle Routen)
- [ ] Admin-Funktionen getestet (Approve, Delete, etc.)
- [ ] Public-Routen getestet (Gruppe laden, Upload)
- [ ] Production `.env` aktualisiert - [ ] Production `.env` aktualisiert
--- ---