TypeScript Academy · leksjon

Middleware og kontekst

Legg til autentisering og delt kontekst i prosedyrer.

Leksjon 4 av 413 trinn

Middleware og kontekst er en gratis leksjon i TypeScript Academy på CoddyKit. Dette er leksjon 4 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i TypeScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.

Hva er kontekst

Hver tRPC-forespørsel har med seg en kontekst: delte data som er tilgjengelige for alle prosedyrer, for eksempel databaseklienten, forespørselen og den aktuelle brukeren. De bygger den én gang per forespørsel med en createContext-funksjon.

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

Typebestemmelse av konteksten

tRPC utleder konteksttypen fra createContext og viderefører den gjennom alle prosedyrer. De initialiserer instansen med denne konteksttypen, slik at resolverer ser ctx med riktig type.

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

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

Lesing av ctx i en resolver

Inne i enhver prosedyre er konteksten tilgjengelig som ctx og er fullt typebestemt. Her leser en prosedyre den aktuelle brukeren fra konteksten.

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

Hva er middleware

Middleware kjører før en prosedyres resolver. Den kan kontrollere tillatelser, logge eller endre konteksten. Den kaller enten next() for å fortsette, eller kaster en feil for å avvise forespørselen.

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

En middleware for autentisering

En vanlig middleware håndhever autentisering. Hvis det ikke finnes noen bruker i konteksten, kaster den en UNAUTHORIZED-feil; ellers fortsetter den til resolveren.

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

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

Avgrensing av konteksten med next

Middleware kan presisere konteksttypen ved å sende en ny ctx til next. Etter autentiseringskontrollen er brukeren garantert å være til stede, så vi avgrenser user fra mulig 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
});

Bygging av en beskyttet prosedyre

Koble til middleware med .use for å opprette en gjenbrukbar beskyttet prosedyre. Alle prosedyrer som bygges fra den, krever autentisering og ser en bruker som ikke er null.

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

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

Offentlige kontra beskyttede

De har nå to byggesteiner: publicProcedure for åpne endepunkter og protectedProcedure for autentiserte endepunkter. Ved å velge riktig grunnlag dokumenterer og håndhever De tilgang både på type- og kjøretidsnivå.

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

Videreføring av ctx-typen

Den avgrensede konteksten videreføres: Fordi protectedProcedure garanterer at ctx.user finnes, ser hver resolver som bygger på den en type som ikke kan være null, uten en ny kontroll. Middleware-en uttrykker invarianten én gang.

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

Sammensetting av middleware

Middleware settes sammen ved å lenke .use. De kan for eksempel bruke logging, deretter autentisering og så en rollekontroll. Hver del kjører i riktig rekkefølge, og hver del kan avgrense konteksten ytterligere for den neste.

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

Det fullstendige bildet

Konteksten leverer data per forespørsel, middleware beskytter og presiserer dem, og spesialiserte prosedyrer bygger disse garantiene inn. Kombinert med inputskjemaer og den typede klienten får De et API som er sikkert både ved kjøring og ved kompilering, fra ende til ende.

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

Kort kontroll

Test forståelsen Deres av kontekst og middleware.

Besvar den i den interaktive leksjonen

Oppsummering

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

createContext bygger delte data per forespørsel, med type fra initTRPC.context.
Middleware kjører før resolverer for å beskytte og presisere konteksten.
Ved å sende ctx til next avgrenses typen.
protectedProcedure bygger inn autentisering, slik at resolverer får en bruker som ikke er null.

De har fullført kurset i typesikkerhet fra ende til ende.

Gratis å komme i gang

Lær deg TypeScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 101
Leksjoner: 352

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Middleware og kontekst» gratis?

Ja – hele teksten i «Middleware og kontekst» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av TypeScript Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Middleware og kontekst»?

Legg til autentisering og delt kontekst i prosedyrer. Du øver på TypeScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med TypeScript Academy?

Ingen tidligere erfaring er nødvendig. TypeScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 4 av 4.

Hvor lang tid tar leksjonen «Middleware og kontekst»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne TypeScript Academy-leksjonen?

Ja. Alle TypeScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til TypeScript Academy