--- title: "Wie man Grundlegende Autorisierung in Astro Implementiert" description: "Lerne, wie du grundlegende Authentifizierung zu deiner Astro-Anwendung mit Middleware hinzufügst. Schütze deine Routen vor dem Launch in die Produktion mit dieser einfachen Implementierung." source: "https://www.launchfa.st/de/blog/implement-basic-authorization-astro" author: "Rishi Raj Jain" created_at: 2025-07-16T10:00:00.000Z keywords: "astro, authentifizierung, basic auth, middleware, autorisierung, sicherheit, webentwicklung" --- > **Site index for agents** > Fetch https://www.launchfa.st/llms.txt to discover every page on this site. > Every page is also available as Markdown by appending `.md` to its URL. Wie man Grundlegende Autorisierung in Astro Implementiert Beim Erstellen von Webanwendungen gibt es Zeiten, in denen du deine Routen schützen musst, bevor du sie in die Produktion bringst. Ob du an einem Kundenprojekt arbeitest, das vor der Öffentlichkeit versteckt werden muss, oder du eine einfache Authentifizierungsschicht zu deiner Entwicklungsumgebung hinzufügen möchtest - **grundlegende Autorisierung** ist eine schnelle und effektive Lösung. In diesem Leitfaden zeigen wir dir, wie du grundlegende Authentifizierung in deiner Astro-Anwendung mit Middleware implementierst. Dieser Ansatz ist perfekt für temporären Schutz während der Entwicklungs- oder Staging-Phasen. ## Inhaltsverzeichnis - [Was ist Grundlegende Authentifizierung?](#was-ist-grundlegende-authentifizierung) - [Schritt-für-Schritt Implementierung](#schritt-für-schritt-implementierung) - [Schritt 1: Erstelle eine neue Astro-Anwendung](#schritt-1-erstelle-eine-neue-astro-anwendung) - [Schritt 2: Integriere den Node.js-Adapter in dein Astro-Projekt](#schritt-2-integriere-den-nodejs-adapter-in-dein-astro-projekt) - [Schritt 3: Erstelle eine Middleware-Datei](#schritt-3-erstelle-eine-middleware-datei) - [Schritt 4: Konfiguriere Geschützte Routen](#schritt-4-konfiguriere-geschützte-routen) - [Schritt 5: Richte Umgebungsvariablen ein (Empfohlen)](#schritt-5-richte-umgebungsvariablen-ein-empfohlen) - [Wie es Funktioniert](#wie-es-funktioniert) - [1. Routenschutz-Logik](#1-routenschutz-logik) - [2. Authentifizierungsablauf](#2-authentifizierungsablauf) ## Was ist Grundlegende Authentifizierung? Grundlegende Authentifizierung ist ein einfaches Authentifizierungsschema, das in das HTTP-Protokoll integriert ist. Es funktioniert folgendermaßen: 1. **Client-Anfrage**: Der Browser sendet eine Anfrage an eine geschützte Route 2. **Server-Herausforderung**: Der Server antwortet mit einem `401 Unauthorized` Status und einem `WWW-Authenticate` Header 3. **Browser-Prompt**: Der Browser zeigt dem Benutzer ein Anmeldedialog an 4. **Anmeldedaten**: Der Benutzer gibt Benutzername/Passwort ein, die kodiert und mit nachfolgenden Anfragen gesendet werden 5. **Validierung**: Der Server validiert die Anmeldedaten und erlaubt oder verweigert den Zugriff ## Schritt-für-Schritt Implementierung ### Schritt 1: Erstelle eine neue Astro-Anwendung Lass uns mit der Erstellung eines neuen Astro-Projekts beginnen. Führe den folgenden Befehl aus: ```bash npm create astro@latest my-app ``` `npm create astro` ist die empfohlene Methode, um schnell ein Astro-Projekt zu erstellen. Wenn du gefragt wirst, wähle: - `Empty` wenn du gefragt wirst, wie du das neue Projekt starten möchtest. - `Yes` wenn du gefragt wirst, ob du TypeScript schreiben planst. - `Strict` wenn du gefragt wirst, wie streng TypeScript sein soll. - `Yes` wenn du gefragt wirst, ob du Abhängigkeiten installieren möchtest. - `Yes` wenn du gefragt wirst, ob du ein Git-Repository initialisieren möchtest. Sobald das erledigt ist, kannst du in das Projektverzeichnis wechseln und die App starten: ```bash cd my-app npm run dev ``` Die App sollte auf [localhost:4321](http://localhost:4321/) laufen. ### Schritt 2: Integriere den Node.js-Adapter in dein Astro-Projekt Um Server-Side Rendering in deinem Astro-Projekt über den Node.js-Adapter zu aktivieren. Führe den folgenden Befehl aus: ```bash npx astro add node ``` Wenn du gefragt wirst, wähle Folgendes: - `Yes` wenn du gefragt wirst, ob du die Node.js-Abhängigkeiten installieren möchtest. - `Yes` wenn du gefragt wirst, ob du Änderungen an der Astro-Konfigurationsdatei vornehmen möchtest. Dies installiert die notwendigen Abhängigkeiten und aktualisiert deine `astro.config.mjs` Datei. ### Schritt 3: Erstelle eine Middleware-Datei Erstelle eine neue Datei namens `middleware.ts` in deinem `src/` Verzeichnis mit dem folgenden Code: ```typescript // src/middleware.ts import { defineMiddleware } from 'astro:middleware' // Definiere geschützte Routen, die "grundlegende Authentifizierung" erfordern // (nur um die Seiten hinter einer Basic Auth zu schützen, bevor du deine Anwendung der Welt zeigst) const PROTECTED_ROUTES = [ // '/', // '/signin' ] // Grundlegende Anmeldedaten (in der Produktion, verwende Umgebungsvariablen) const VALID_CREDENTIALS = { username: 'admin', password: 'password123', } export const onRequest = defineMiddleware(async (context, next) => { const { url, request } = context const pathname = new URL(url).pathname // Prüfe, ob die aktuelle Route geschützt ist const isProtectedRoute = PROTECTED_ROUTES.some((route) => (route === '/' ? pathname === route : pathname.startsWith(route)) ) // Für geschützte Routen, prüfe die Authentifizierung if (isProtectedRoute) { const authHeader = request.headers.get('authorization') if (!authHeader || !authHeader.startsWith('Basic ')) { // Gib 401 Unauthorized mit WWW-Authenticate Header zurück return new Response('Authentifizierung erforderlich', { status: 401, headers: { 'WWW-Authenticate': 'Basic realm="Sicherer Bereich"', 'Content-Type': 'text/plain', }, }) } // Extrahiere und dekodiere Anmeldedaten const encodedCredentials = authHeader.substring(6) const decodedCredentials = atob(encodedCredentials) const [username, password] = decodedCredentials.split(':') // Validiere Anmeldedaten if (username !== VALID_CREDENTIALS.username || password !== VALID_CREDENTIALS.password) { return new Response('Ungültige Anmeldedaten', { status: 401, headers: { 'WWW-Authenticate': 'Basic realm="Sicherer Bereich"', 'Content-Type': 'text/plain', }, }) } } // Fahre mit dem nächsten Middleware/Route-Handler fort return next() }) ``` ### Schritt 4: Konfiguriere Geschützte Routen In der Middleware-Datei kannst du angeben, welche Routen geschützt werden sollen, indem du Routen zum `PROTECTED_ROUTES` Array hinzufügst oder auskommentierst: ```typescript // src/middleware.ts const PROTECTED_ROUTES = [ '/', // Schütze die Startseite '/admin', // Schütze alle Routen, die mit /admin beginnen '/dashboard', // Schütze alle Routen, die mit /dashboard beginnen '/api', // Schütze alle API-Routen ] ``` ### Schritt 5: Richte Umgebungsvariablen ein (Empfohlen) Für den Produktionseinsatz ist es besser, Umgebungsvariablen anstelle von hartcodierten Anmeldedaten zu verwenden. Erstelle eine `.env` Datei: ```bash # .env BASIC_AUTH_USERNAME=admin BASIC_AUTH_PASSWORD=dein-sicheres-passwort ``` Dann aktualisiere die Middleware, um diese Umgebungsvariablen zu verwenden: ```typescript // middleware.ts const VALID_CREDENTIALS = { username: import.meta.env.BASIC_AUTH_USERNAME || 'admin', password: import.meta.env.BASIC_AUTH_PASSWORD || 'password123', } ``` ## Wie es Funktioniert ### 1. Routenschutz-Logik Die Middleware prüft, ob die aktuelle Route im `PROTECTED_ROUTES` Array ist: ```typescript const isProtectedRoute = PROTECTED_ROUTES.some((route) => (route === '/' ? pathname === route : pathname.startsWith(route)) ) ``` Dies ermöglicht flexibles Route-Matching: - Exakte Übereinstimmungen: `'/'` passt nur zur Startseite - Präfix-Übereinstimmungen: `'/admin'` passt zu `/admin`, `/admin/users`, `/admin/settings`, etc. ### 2. Authentifizierungsablauf Wenn ein Benutzer eine geschützte Route besucht: 1. **Kein Auth-Header**: Wenn kein `Authorization` Header vorhanden ist, gibt der Server eine `401` Antwort mit einem `WWW-Authenticate` Header zurück 2. **Browser-Prompt**: Der Browser zeigt ein Anmeldedialog an 3. **Anmeldedaten Gesendet**: Benutzer gibt Anmeldedaten ein, Browser sendet sie base64-kodiert 4. **Validierung**: Server dekodiert und validiert die Anmeldedaten 5. **Zugriff Gewährt/Verweigert**: Wenn gültig, wird die Anfrage fortgesetzt; wenn ungültig, wird eine weitere `401` zurückgegeben ## Fazit Grundlegende Authentifizierung in Astro ist eine direkte Möglichkeit, deine Routen während der Entwicklung oder im Staging zu schützen. Obwohl sie nicht für die Benutzerauthentifizierung in der Produktion geeignet ist, ist sie perfekt für: - **Entwicklungsschutz**: Funktionen in der Entwicklung verstecken - **Kunden-Demos**: Kundenprojekte vor dem Launch schützen - **Staging-Umgebungen**: Staging-Sites sichern - **Admin-Bereiche**: Schneller Schutz für Admin-Interfaces Der Middleware-Ansatz, den wir implementiert haben, ist sauber, effizient und einfach für deine spezifischen Bedürfnisse anzupassen. Denke daran, Umgebungsvariablen für Anmeldedaten zu verwenden und robustere Authentifizierungslösungen für Produktionsanwendungen zu erwägen.