TypeScript Academy · Lektion

Middleware og kontekst

Føj auth og delt kontekst til procedurer

Lektion 4 af 413 trin

Middleware og kontekst er en gratis TypeScript Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i TypeScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. TypeScript Academy-kurset indeholder 4 lektioner i alt.

Hvad er kontekst

Hver tRPC-forespørgsel medfører en kontekst: delte data, der er tilgængelige for alle procedurer, f.eks. databaseklienten, forespørgslen og den aktuelle bruger. Du opbygger den én gang pr. forespørgsel med en createContext-funktion.

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

Typeangivelse af konteksten

tRPC infererer konteksttypen fra createContext og fører den gennem hver procedure. Du initialiserer instansen med denne konteksttype, så resolverne ser ctx med den korrekte type.

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

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

Læsning af ctx i en resolver

Inde i enhver procedure er konteksten tilgængelig som ctx og fuldt typeangivet. Her læser en procedure den aktuelle bruger fra konteksten.

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

Hvad er middleware

Middleware kører før en procedureresolver. Den kan kontrollere tilladelser, logge eller ændre konteksten. Den kalder enten next() for at fortsætte eller kaster en fejl for at afvise forespørgslen.

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

En middleware til godkendelse

En almindelig middleware håndhæver godkendelse. Hvis der ikke er en bruger i konteksten, kaster den en UNAUTHORIZED-fejl; ellers fortsætter den til resolveren.

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

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

Indsnævring af konteksten med next

Middleware kan forfine konteksttypen ved at sende en ny ctx til next. Efter godkendelseskontrollen er brugeren garanteret til stede, så vi indsnævrer user fra muligvis null til ikke-null.

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

Opbygning af en beskyttet procedure

Tilknyt middlewaren med .use for at oprette en genanvendelig beskyttet procedure. Alle procedurer, der bygges ud fra den, kræver godkendelse og ser en bruger, der ikke er null.

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

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

Offentlig kontra beskyttet

Du har nu to byggesten: publicProcedure til åbne slutpunkter og protectedProcedure til godkendte slutpunkter. Når du vælger det rigtige grundlag, dokumenterer og håndhæver du adgangen både på type- og kørselstidsniveau.

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

Forplantning af den typeangivne ctx

Den indsnævrede kontekst forplanter sig: Fordi protectedProcedure garanterede ctx.user, ser hver resolver, der bygger på den, den ikke-null-type uden at kontrollere igen. Middlewaren indkoder invarianten én gang.

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

Sammensætning af middleware

Middleware sammensættes ved at kæde .use. Du kan f.eks. anvende logning, derefter godkendelse og til sidst en rollekontrol. De kører i rækkefølge, og hver af dem kan indsnævre konteksten yderligere for den næste.

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

Det fulde overblik

Konteksten leverer data pr. forespørgsel, middleware beskytter og forfiner dem, og specialiserede procedurer indbygger disse garantier. Sammen med inddataskemaer og den typeangivne klient får du et API, der er sikkert både under kørsel og ved kompilering fra ende til anden.

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

Hurtig test

Test din forståelse af kontekst og middleware.

Besvar den i den interaktive lektion

Opsummering

Du har sikret et tRPC-API med kontekst og middleware.

createContext opbygger delte data pr. forespørgsel, typeangivet via initTRPC.context.
Middleware kører før resolverne for at beskytte og forfine konteksten.
Hvis du sender ctx til next, indsnævres dens type.
protectedProcedure indbygger godkendelse, så resolverne får en bruger, der ikke er null.

Du har gennemført kurset i typesikkerhed fra ende til anden.

Gratis at komme i gang

Lær TypeScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 101
Lektioner: 352

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Middleware og kontekst” gratis?

Ja — hele teksten til “Middleware og kontekst” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af TypeScript Academy-kurset, skal du opgradere til CoddyKit PRO. TypeScript Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Middleware og kontekst”?

Føj auth og delt kontekst til procedurer Du øver dig i TypeScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på TypeScript Academy?

Der kræves ingen tidligere erfaring. TypeScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.

Hvor lang tid tager lektionen “Middleware og kontekst”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne TypeScript Academy-lektion?

Ja. Alle TypeScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til TypeScript Academy