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:
parent
36e7302677
commit
7cb264820e
|
|
@ -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
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user