TypeScript Academy · Lección

Middleware y contexto

Añada autenticación y contexto compartido a los procedimientos.

Middleware y contexto es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.

Qué es el contexto

Cada solicitud de tRPC lleva un contexto: datos compartidos disponibles para todos los procedimientos, como el cliente de base de datos, la solicitud y el usuario actual. Se crea una vez por solicitud mediante una función createContext.

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

Tipado del contexto

tRPC infiere el tipo del contexto a partir de createContext y lo transmite a todos los procedimientos. Inicialice la instancia con ese tipo de contexto para que los resolvers vean ctx correctamente tipado.

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

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

Lectura de ctx en un resolver

Dentro de cualquier procedimiento, el contexto está disponible como ctx y está completamente tipado. En este caso, un procedimiento lee el usuario actual desde el contexto.

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

Qué es el middleware

El middleware se ejecuta antes del resolver de un procedimiento. Puede comprobar permisos, registrar información o modificar el contexto. Llama a next() para continuar o lanza un error para rechazar la solicitud.

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

Un middleware de autenticación

Un middleware habitual aplica la autenticación. Si no hay ningún usuario en el contexto, lanza un error UNAUTHORIZED; de lo contrario, continúa hasta el resolver.

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

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

Reducción del contexto con next

El middleware puede precisar el tipo del contexto pasando un nuevo ctx a next. Después de comprobar la autenticación, se garantiza que el usuario está presente, por lo que reducimos user de posiblemente nulo a no nulo.

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

Creación de un procedimiento protegido

Conecte el middleware mediante .use para crear un procedimiento protegido reutilizable. Todo procedimiento creado a partir de él requiere autenticación y recibe un usuario no nulo.

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

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

Público frente a protegido

Ahora dispone de dos componentes básicos: publicProcedure para endpoints abiertos y protectedProcedure para endpoints autenticados. Elegir la base adecuada documenta y aplica el acceso tanto en el nivel de tipos como durante la ejecución.

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

Propagación de ctx con tipos

El contexto precisado se propaga: como protectedProcedure garantiza ctx.user, todos los resolvers creados a partir de él ven el tipo no nulo sin tener que volver a comprobarlo. El middleware codifica el invariante una sola vez.

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

Composición de middleware

El middleware se compone encadenando .use. Puede aplicar primero el registro, después la autenticación y luego una comprobación de rol. Cada elemento se ejecuta en orden y puede precisar aún más el contexto para el siguiente.

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

Panorama completo

El contexto proporciona datos por solicitud, el middleware los protege y precisa, y los procedimientos especializados incorporan esas garantías. Junto con los esquemas de entrada y el cliente tipado, obtiene una API segura durante la ejecución y durante la compilación, de extremo a extremo.

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

Comprobación rápida

Compruebe su comprensión del contexto y el middleware.

Resumen

Ha protegido una API de tRPC con contexto y middleware.

createContext crea datos compartidos por solicitud, tipados mediante initTRPC.context.
El middleware se ejecuta antes de los resolvers para proteger y precisar el contexto.
Pasar ctx a next precisa su tipo.
protectedProcedure incorpora la autenticación, de modo que los resolvers reciben un usuario no nulo.

Ha completado el curso de seguridad de tipos de extremo a extremo.

Preguntas frecuentes

¿La lección «Middleware y contexto» es gratis?

Sí — el texto completo de «Middleware y contexto» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Middleware y contexto»?

Añada autenticación y contexto compartido a los procedimientos. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar TypeScript Academy?

No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Middleware y contexto»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?

Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

La arquitectura de tRPC
Definición de routers y procedimientos
Inferencia de tipos entre cliente y servidor
Middleware y contexto

← Volver a TypeScript Academy