TypeScript Academy · Pelajaran

Middleware dan Konteks

Tambahkan autentikasi dan konteks bersama ke prosedur.

Middleware dan Konteks adalah pelajaran TypeScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar TypeScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa Itu Konteks

Setiap permintaan tRPC membawa konteks: data bersama yang tersedia untuk semua prosedur, seperti client basis data, permintaan, dan pengguna saat ini. Anda membangunnya sekali untuk setiap permintaan dengan fungsi createContext.

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

Memberi Tipe pada Konteks

tRPC menginferensikan tipe konteks dari createContext dan meneruskannya melalui setiap prosedur. Anda menginisialisasi instans dengan tipe konteks tersebut agar penyelesai melihat ctx dengan tipe yang benar.

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

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

Membaca ctx dalam Penyelesai

Di dalam prosedur apa pun, konteks tersedia sebagai ctx dan sepenuhnya bertipe. Di sini, sebuah prosedur membaca pengguna saat ini dari konteks.

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

Apa Itu Middleware

Middleware dijalankan sebelum penyelesai prosedur. Middleware dapat memeriksa izin, melakukan pencatatan, atau mengubah konteks. Middleware memanggil next() untuk melanjutkan atau melempar kesalahan untuk menolak permintaan.

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

Middleware Autentikasi

Middleware yang umum digunakan untuk menegakkan autentikasi. Jika tidak ada pengguna dalam konteks, middleware melempar kesalahan UNAUTHORIZED; jika ada, middleware melanjutkan ke penyelesai.

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

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

Mempersempit Konteks dengan next

Middleware dapat menyempurnakan tipe konteks dengan meneruskan ctx baru ke next. Setelah pemeriksaan autentikasi, pengguna dijamin ada, sehingga kita mempersempit user dari mungkin bernilai null menjadi selalu bernilai.

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

Membangun Prosedur Terlindungi

Pasang middleware dengan .use untuk membuat prosedur terlindungi yang dapat digunakan kembali. Setiap prosedur yang dibangun darinya memerlukan autentikasi dan melihat pengguna yang selalu ada.

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

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

Publik dibandingkan dengan Terlindungi

Sekarang Anda memiliki dua blok pembangun: publicProcedure untuk titik akhir terbuka dan protectedProcedure untuk titik akhir yang memerlukan autentikasi. Memilih dasar yang tepat mendokumentasikan dan menegakkan akses pada tingkat tipe serta waktu proses.

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

Penerusan ctx Bertipe

Konteks yang dipersempit diteruskan: karena protectedProcedure menjamin ctx.user, setiap penyelesai yang dibangun di atasnya melihat tipe pengguna yang selalu ada tanpa pemeriksaan ulang. Middleware menyatakan invarian tersebut sekali.

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

Menggabungkan Middleware

Middleware digabungkan dengan merangkai .use. Anda dapat menerapkan pencatatan, lalu autentikasi, kemudian pemeriksaan peran. Masing-masing dijalankan secara berurutan, dan masing-masing dapat mempersempit konteks lebih lanjut untuk tahap berikutnya.

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

Gambaran Lengkap

Konteks menyediakan data per permintaan, middleware menjaga dan menyempurnakannya, dan prosedur khusus menyertakan jaminan tersebut. Jika digabungkan dengan skema masukan dan client bertipe, Anda mendapatkan API yang aman saat waktu proses dan saat waktu kompilasi, dari ujung ke ujung.

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

Uji Cepat

Uji pemahaman Anda tentang konteks dan middleware.

Rangkuman

Anda telah mengamankan API tRPC dengan konteks dan middleware.

createContext membangun data bersama per permintaan, yang diberi tipe melalui initTRPC.context.
Middleware dijalankan sebelum penyelesai untuk menjaga dan menyempurnakan konteks.
Meneruskan ctx ke next mempersempit tipenya.
protectedProcedure menyertakan autentikasi sehingga penyelesai mendapatkan pengguna yang selalu ada.

Anda telah menyelesaikan kursus keamanan tipe ujung ke ujung.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Middleware dan Konteks” gratis?

Ya — teks lengkap “Middleware dan Konteks” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus TypeScript Academy, upgrade ke CoddyKit PRO. Kursus TypeScript Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Middleware dan Konteks”?

Tambahkan autentikasi dan konteks bersama ke prosedur. Kamu berlatih TypeScript Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai TypeScript Academy?

Tidak diperlukan pengalaman sebelumnya. TypeScript Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “Middleware dan Konteks” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran TypeScript Academy ini?

Ya. Setiap pelajaran TypeScript Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke TypeScript Academy