TypeScript Academy · Lezione

Middleware e contesto

Aggiunga autenticazione e contesto condiviso alle procedure.

Middleware e contesto è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 4 lezioni in totale.

Che cos'è il contesto

Ogni richiesta tRPC contiene un contesto: dati condivisi disponibili per tutte le procedure, come il client del database, la richiesta e l'utente corrente. Il contesto viene creato una volta per richiesta tramite una funzione createContext.

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

Tipizzare il contesto

tRPC inferisce il tipo del contesto da createContext e lo propaga attraverso ogni procedura. Si inizializza l'istanza con quel tipo di contesto, in modo che i resolver vedano ctx tipizzato correttamente.

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

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

Leggere ctx in un resolver

All'interno di qualsiasi procedura, il contesto è disponibile come ctx ed è completamente tipizzato. In questo caso, una procedura legge l'utente corrente dal contesto.

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

Che cos'è il middleware

Il middleware viene eseguito prima del resolver di una procedura. Può verificare i permessi, registrare eventi o modificare il contesto. Chiama next() per continuare oppure genera un'eccezione per rifiutare la richiesta.

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

Un middleware di autenticazione

Un middleware comune impone l'autenticazione. Se nel contesto non è presente alcun utente, genera un errore UNAUTHORIZED; altrimenti prosegue verso il resolver.

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

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

Restringere il contesto con next

Il middleware può perfezionare il tipo del contesto passando un nuovo ctx a next. Dopo il controllo di autenticazione, la presenza dell'utente è garantita, quindi restringiamo user da potenzialmente nullo a non nullo.

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

Costruire una procedura protetta

Colleghi il middleware con .use per creare una procedura protetta riutilizzabile. Qualsiasi procedura costruita a partire da essa richiede l'autenticazione e vede un utente non nullo.

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

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

Pubblico e protetto

Ora dispone di due elementi costitutivi: publicProcedure per gli endpoint pubblici e protectedProcedure per quelli autenticati. Scegliere la base corretta documenta e applica l'accesso sia a livello di tipi sia a runtime.

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

Propagazione tipizzata di ctx

Il contesto ristretto viene propagato: poiché protectedProcedure garantisce ctx.user, ogni resolver costruito su di essa vede il tipo non nullo senza dover ripetere il controllo. Il middleware codifica l'invariante una sola volta.

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

Comporre il middleware

Il middleware viene composto concatenando .use. È possibile applicare prima la registrazione, poi l'autenticazione e infine un controllo del ruolo. Ogni middleware viene eseguito nell'ordine previsto e può restringere ulteriormente il contesto per quello successivo.

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

Quadro completo

Il contesto fornisce i dati per ogni richiesta, il middleware li protegge e li perfeziona e le procedure specializzate incorporano queste garanzie. Insieme agli schemi di input e al client tipizzato, si ottiene un'API sicura a runtime e durante la compilazione, end-to-end.

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

Verifica rapida

Verifichi la propria comprensione di contesto e middleware.

Riepilogo

Ha protetto un'API tRPC con contesto e middleware.

createContext crea i dati condivisi per ogni richiesta, tipizzati tramite initTRPC.context.
Il middleware viene eseguito prima dei resolver per proteggere e perfezionare il contesto.
Passare ctx a next ne restringe il tipo.
protectedProcedure incorpora l'autenticazione, così i resolver ricevono un utente non nullo.

Ha completato il corso sulla sicurezza dei tipi end-to-end.

Domande Frequenti

La lezione «Middleware e contesto» è gratuita?

Sì — il testo completo di «Middleware e contesto» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 4 lezioni in totale.

Cosa imparerò in «Middleware e contesto»?

Aggiunga autenticazione e contesto condiviso alle procedure. Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare TypeScript Academy?

Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Middleware e contesto»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?

Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a TypeScript Academy