TypeScript Academy · Lektion

Middleware und Kontext

Fügen Sie Procedures Authentifizierung und einen gemeinsamen Kontext hinzu.

Middleware und Kontext ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist ein Context

Jede tRPC-Anfrage enthält einen Context: gemeinsame Daten, die allen Procedures zur Verfügung stehen, etwa der Datenbank-Client, die Anfrage und der aktuelle Benutzer. Sie erstellen ihn mit einer createContext-Funktion einmal pro Anfrage.

export async function createContext({ req }: { req: Request }) {
  const token = req.headers.get('authorization');
  const user = await getUserFromToken(token);
  return { user };
}

Den Context typisieren

tRPC leitet den Context-Typ aus createContext ab und führt ihn durch jede Procedure. Sie initialisieren die Instanz mit diesem Context-Typ, damit Resolver ein korrekt typisiertes ctx sehen.

import { initTRPC } from '@trpc/server';

type Context = Awaited<ReturnType<typeof createContext>>;
const t = initTRPC.context<Context>().create();

ctx in einem Resolver auslesen

Innerhalb jeder Procedure ist der Context als ctx verfügbar und vollständig typisiert. In diesem Beispiel liest eine Procedure den aktuellen Benutzer aus dem Context.

const me = t.procedure.query(({ ctx }) => {
  // ctx.user is typed from createContext
  return ctx.user;
});

Was ist Middleware

Middleware wird vor dem Resolver einer Procedure ausgeführt. Sie kann Berechtigungen prüfen, Protokolleinträge schreiben oder den Context ändern. Sie ruft entweder next() auf, um fortzufahren, oder löst einen Fehler aus, um die Anfrage abzulehnen.

const logger = t.middleware(async ({ path, next }) => {
  console.log('calling', path);
  return next();
});

Eine Auth-Middleware

Eine typische Middleware erzwingt die Authentifizierung. Wenn im Context kein Benutzer vorhanden ist, löst sie einen Fehler UNAUTHORIZED aus; andernfalls fährt sie mit dem Resolver fort.

import { TRPCError } from '@trpc/server';

const isAuthed = t.middleware(({ ctx, next }) => {
  if (!ctx.user) {
    throw new TRPCError({ code: 'UNAUTHORIZED' });
  }
  return next();
});

Den Context mit next eingrenzen

Middleware kann den Context-Typ verfeinern, indem sie einen neuen ctx an next übergibt. Nach der Authentifizierungsprüfung ist garantiert ein Benutzer vorhanden, sodass wir user von möglicherweise null auf nicht null eingrenzen können.

const isAuthed = t.middleware(({ ctx, next }) => {
  if (!ctx.user) throw new TRPCError({ code: 'UNAUTHORIZED' });
  return next({ ctx: { user: ctx.user } }); // user now non-null
});

Eine geschützte Procedure erstellen

Binden Sie die Middleware mit .use an, um eine wiederverwendbare geschützte Procedure zu erstellen. Jede daraus erstellte Procedure erfordert eine Authentifizierung und sieht einen Benutzer, der nicht null ist.

export const protectedProcedure = t.procedure.use(isAuthed);

const secret = protectedProcedure.query(({ ctx }) => {
  return 'Hello ' + ctx.user.name; // user is guaranteed
});

Öffentlich vs. geschützt

Sie verfügen nun über zwei Bausteine: publicProcedure für offene Endpunkte und protectedProcedure für authentifizierte Endpunkte. Die Wahl der richtigen Basis dokumentiert und erzwingt den Zugriff auf Typ- und Laufzeitebene.

const ping = publicProcedure.query(() => 'pong');
const account = protectedProcedure.query(({ ctx }) => ctx.user);

Typisierte ctx-Weitergabe

Der eingegrenzte Context wird weitergegeben: Da protectedProcedure einen vorhandenen ctx.user garantiert, sieht jeder darauf aufgebaute Resolver den Typ als nicht null, ohne ihn erneut prüfen zu müssen. Die Middleware kodiert diese Invariante einmal.

// In any protectedProcedure resolver:
// ctx.user is User, not User | null

Middleware kombinieren

Middleware wird durch Verkettung von .use kombiniert. Sie können zunächst Protokollierung, dann Authentifizierung und anschließend eine Rollenprüfung anwenden. Jede Middleware wird in dieser Reihenfolge ausgeführt und kann den Context für die nächste weiter eingrenzen.

const adminProcedure = protectedProcedure.use(({ ctx, next }) => {
  if (ctx.user.role !== 'admin') {
    throw new TRPCError({ code: 'FORBIDDEN' });
  }
  return next();
});

Das vollständige Bild

Der Context stellt Daten pro Anfrage bereit, Middleware schützt und verfeinert diese Daten, und spezialisierte Procedures verankern diese Garantien. Zusammen mit Eingabeschemata und dem typisierten Client erhalten Sie eine API, die durchgängig sowohl zur Laufzeit als auch zur Compile-Zeit sicher ist.

// createContext -> ctx
// middleware -> auth + narrowing
// protectedProcedure -> guaranteed ctx.user
// typed client -> end-to-end safety

Kurzer Test

Testen Sie Ihr Verständnis von Context und Middleware.

Zusammenfassung

Sie haben eine tRPC-API mit Context und Middleware abgesichert.

createContext erstellt gemeinsame Daten pro Anfrage, typisiert über initTRPC.context.
Middleware wird vor den Resolvern ausgeführt, um den Context zu schützen und zu verfeinern.
Wenn Sie ctx an next übergeben, wird dessen Typ eingegrenzt.
protectedProcedure verankert die Authentifizierung, sodass Resolver einen Benutzer sehen, der nicht null ist.

Sie haben den Kurs zur Ende-zu-Ende-Typsicherheit abgeschlossen.

Häufig gestellte Fragen

Ist die Lektion „Middleware und Kontext“ kostenlos?

Ja — der vollständige Text von „Middleware und Kontext“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Middleware und Kontext“?

Fügen Sie Procedures Authentifizierung und einen gemeinsamen Kontext hinzu. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Middleware und Kontext“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu TypeScript Academy