TypeScript Academy · Oppitunti

Middleware ja konteksti

Lisätkää autentikointi ja jaettu konteksti proseduurien yhteyteen.

Oppitunti 4/413 vaihetta

Middleware ja konteksti on ilmainen TypeScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 4/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu TypeScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Mikä konteksti on

Jokainen tRPC-pyyntö sisältää kontekstin: kaikille proseduureille saatavilla olevat yhteiset tiedot, kuten tietokanta-asiakkaan, pyynnön ja nykyisen käyttäjän. Luotte sen kerran pyyntöä kohden createContext-funktiolla.

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

Kontekstin tyypitys

tRPC päättelee kontekstin tyypin createContext-funktiosta ja välittää sen jokaiselle proseduurille. Alustakaa instanssi tällä kontekstityypillä, jotta resolverit näkevät oikein tyypitetyn ctx:n.

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

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

ctx:n lukeminen resolverissa

Jokaisen proseduurin sisällä konteksti on käytettävissä täysin tyypitettynä muodossa ctx. Tässä proseduuri lukee nykyisen käyttäjän kontekstista.

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

Mikä middleware on

Middleware suoritetaan ennen proseduurin resolveria. Se voi tarkistaa käyttöoikeudet, kirjata tapahtumia tai muokata kontekstia. Se kutsuu jatkaakseen next()-funktiota tai heittää virheen hylätäkseen pyynnön.

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

Todennus-middleware

Yleinen middleware pakottaa käyttäjän todentamisen. Jos kontekstissa ei ole käyttäjää, se heittää virheen UNAUTHORIZED; muuten suoritus jatkuu resolveriin.

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

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

Kontekstin tarkentaminen nextillä

Middleware voi tarkentaa kontekstin tyyppiä välittämällä uuden ctx:n next-kutsulle. Todennustarkistuksen jälkeen käyttäjän läsnäolo on varmistettu, joten user voidaan tarkentaa mahdollisesti tyhjästä arvosta ei-tyhjäksi.

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

Suojatun proseduurin rakentaminen

Liittäkää middleware .use-rakenteella luodaksenne uudelleenkäytettävän suojatun proseduurin. Jokainen siitä rakennettu proseduuri edellyttää todennusta ja näkee käyttäjän ei-tyhjänä.

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

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

Julkinen ja suojattu

Käytössänne on nyt kaksi rakennuspalikkaa: publicProcedure avoimille päätepisteille ja protectedProcedure todennetuille päätepisteille. Oikean perustan valinta dokumentoi ja pakottaa käyttöoikeuden sekä tyyppi- että ajonaikaisesti.

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

Tyypitetyn ctx:n välittyminen

Tarkennettu konteksti välittyy eteenpäin: koska protectedProcedure takaa ctx.user:n olemassaolon, jokainen sen pohjalta rakennettu resolver näkee ei-tyhjän tyypin ilman uutta tarkistusta. Middleware ilmaisee tämän invariantin kerran.

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

Middlewarejen koostaminen

Middlewareja koostetaan ketjuttamalla .use-kutsuja. Voitte esimerkiksi lisätä ensin lokituksen, sitten todennuksen ja lopuksi roolintarkistuksen. Jokainen suoritetaan järjestyksessä, ja jokainen voi tarkentaa kontekstia seuraavaa vaihetta varten.

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

Kokonaiskuva

Konteksti tarjoaa pyyntökohtaiset tiedot, middleware suojaa ja tarkentaa niitä, ja erikoistuneet proseduurit rakentavat nämä takuut osaksi itseään. Kun tähän yhdistetään syöteskeemat ja tyypitetty asiakas, saatte rajapinnan, joka on turvallinen sekä ajonaikana että käännösaikana päästä päähän.

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

Pikatarkistus

Testatkaa ymmärrystänne kontekstista ja middlewaresta.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Suojasitte tRPC-rajapinnan kontekstin ja middlewaren avulla.

createContext rakentaa pyyntökohtaiset yhteiset tiedot, joiden tyyppi määritetään initTRPC.context-rakenteella.
Middleware suoritetaan ennen resolvereita suojaamaan ja tarkentamaan kontekstia.
Välittämällä ctx:n next-kutsulle sen tyyppi tarkentuu.
protectedProcedure sisältää todennuksen, joten resolverit saavat ei-tyhjän käyttäjän.

Olette suorittaneet päästä päähän ulottuvan tyyppiturvallisuuden kurssin.

Aloita maksutta

Opi TypeScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 101
Oppitunnit: 352

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Middleware ja konteksti” ilmainen?

Kyllä – oppitunnin ”Middleware ja konteksti” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko TypeScript Academy-kurssin, päivitä CoddyKit PROhon. TypeScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Middleware ja konteksti”?

Lisätkää autentikointi ja jaettu konteksti proseduurien yhteyteen. Harjoittelet TypeScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni TypeScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin TypeScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 4/4.

Kuinka kauan ”Middleware ja konteksti”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä TypeScript Academy-oppitunnilla?

Kyllä. Jokainen TypeScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: TypeScript Academy