Das prompt()-Problem
- Manche Mobile-Browser blockieren prompt()
- Sieht unprofessionell aus
- Kein Passwort-Feld (Input ist sichtbar)
- Kein Error-Feedback möglich
Das adminFetch()-Pattern
- SessionStorage: API-Key wird nach Eingabe im SessionStorage gespeichert. Überlebt Reloads, aber nicht Tab-Schließen.
- Modal Overlay: Bei fehlendem Key: CSS-Modal mit Passwort-Input und Submit-Button.
- adminFetch() Wrapper: Jeder Admin-Call geht durch adminFetch(). Liest Key automatisch, zeigt bei 401 das Modal erneut.
SessionStorage vs. LocalStorage
| SessionStorage | LocalStorage |
|---|---|
| Gelöscht bei Tab-Close | Bleibt gespeichert |
| Pro Session | Persistent |
| Sicherer für Secrets | Riskanter für Secrets |
Warum nicht OAuth? Für ein Single-Admin-Dashboard wäre OAuth/JWT überdimensioniert. Ein einzelner API-Key, sicher übertragen (Header, nicht URL), reicht für den Use Case.
Live Demo: adminFetch() Pattern
Probiere das Pattern selbst aus — mit korrektem und falschem Key:
INTERAKTIV
adminFetch() Demo
Simuliertes Admin-Dashboard mit SessionStorage-Pattern. Tipp: Key = admin-demo-key
SessionStorage
adminKey: (leer)
Admin Dashboard
Auf “Fighter ELO aktualisieren” klicken um adminFetch() auszulösen
Versuche: 0