M10 · Hooks, Auth & Praxis

Hooks — hooks.server.ts

Der zentrale Einstiegspunkt für jeden Request — hier setzen wir current_user für die ganze App.

Was sind Hooks?

src/hooks.server.ts enthält Funktionen, die SvelteKit an zentralen Punkten im Request-Lebenszyklus aufruft. Der wichtigste ist handle: Er läuft bei jedem Server-Request, bevor die passende Route (load/action) ausgeführt wird — der ideale Ort, um Authentifizierung, Logging oder Header zentral zu erledigen.

🛤️ Rails-Vergleich: before_action im ApplicationController

handle ist das SvelteKit-Pendant zu einem globalen before_action. Wir laden die Session einmal und legen den User in event.locals ab — genau wie Rails @current_user setzt.

Rails ruby

# Rails: before_action setzt current_user für alle Controller
class ApplicationController < ActionController::Base
  before_action :set_current_user

  private
  def set_current_user
    @current_user = User.find_by(id: session[:user_id])
  end
end

Der handle-Hook dieses Kurses

Genau diese Datei treibt die DevNotes-Anmeldung an. Sie liest das Session-Cookie, validiert es gegen die Datenbank und hängt den User an event.locals:

src/hooks.server.ts ts

import type { Handle } from '@sveltejs/kit';
import { SESSION_COOKIE, validateSession } from '$lib/server/auth';

// Läuft bei JEDEM Server-Request, bevor die Route drankommt.
export const handle: Handle = async ({ event, resolve }) => {
  const token = event.cookies.get(SESSION_COOKIE);
  const user = await validateSession(token);
  event.locals.user = user ? { id: user.id, username: user.username } : null;
  return resolve(event);
};

event.locals ist ein pro Request frisches Objekt. Damit TypeScript weiß, was drin steckt, deklarieren wir es in app.d.ts:

src/app.d.ts ts

// src/app.d.ts — Typ für event.locals
declare global {
  namespace App {
    interface Locals {
      user: { id: number; username: string } | null;
    }
  }
}
export {};

locals in load & actions nutzen

Ab jetzt ist locals.user überall auf dem Server verfügbar:

+page.server.ts ts

// In jeder +page.server.ts kannst du jetzt locals.user lesen:
export const load = async ({ locals }) => {
  if (!locals.user) throw redirect(303, '/login');
  return { user: locals.user };
};

💡 Weitere Hooks

handleFetch — verändert fetch-Aufrufe aus load-Funktionen.
handleError — zentrale Fehlerbehandlung/Logging.
src/hooks.ts — universelle Hooks (z.B. reroute).

Mehrere Hooks verketten

Mit sequence kombinierst du mehrere handle-Funktionen:

src/hooks.server.ts ts

import { sequence } from '@sveltejs/kit/hooks';

const auth = async ({ event, resolve }) => { /* ... */ return resolve(event); };
const logging = async ({ event, resolve }) => { /* ... */ return resolve(event); };

// Mehrere Hooks nacheinander verketten:
export const handle = sequence(auth, logging);

Zusammenfassung

💡 Das Wichtigste

handle läuft vor jeder Route — ideal für Auth.
event.locals transportiert Request-Daten (z.B. den User) zu load/actions.
Typen für locals gehören in app.d.ts.

🎯 Probier es selbst

Ergänze den handle-Hook um ein einfaches Logging: Gib bei jedem Request Methode und Pfad (event.request.method, event.url.pathname) auf der Konsole aus.