React Academy · Pelajaran

Perlindungan Rute Berbasis Middleware

Gunakan middleware Next.js dan callback autentikasi untuk mengalihkan pengguna yang belum terautentikasi di edge.

Perlindungan Rute Berbasis Middleware adalah pelajaran React 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 React Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus React Academy mencakup 4 pelajaran total.

Apa Itu Middleware Next.js

Middleware berjalan di edge sebelum permintaan mencapai suatu rute. Middleware dapat mengalihkan, menulis ulang, atau menambahkan header — ideal untuk pemeriksaan autentikasi tanpa memuat komponen server.

Membuat Middleware

Buat middleware.ts di akar proyek. Ekspor fungsi middleware dan pencocok config.

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export function middleware(request: NextRequest) {
  const token = request.cookies.get('auth-token')?.value;
  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url));
  }
  return NextResponse.next();
}

export const config = {
  matcher: ['/dashboard/:path*', '/profile/:path*'],
};

Pola Pencocok

Array matcher menggunakan pola jalur. Gunakan :path* untuk subjalur apa pun, atau kecualikan jalur dengan pandang ke depan negatif.

export const config = {
  matcher: [
    // Protect all routes except public ones:
    '/((?!login|register|_next|api/auth|favicon.ico).*)',
  ],
};

Integrasi Middleware Auth.js

Auth.js (v5) menyediakan ekspor middleware siap pakai. Ekspor ulang dari middleware.ts dengan pencocok.

// middleware.ts
export { auth as middleware } from '@/auth';

export const config = {
  matcher: ['/dashboard/:path*', '/settings/:path*'],
};

Memeriksa JWT di Middleware

Verifikasi token JWT di middleware menggunakan pustaka jose (kompatibel dengan edge — tanpa modul crypto Node.js).

import { jwtVerify } from 'jose';

export async function middleware(request: NextRequest) {
  const token = request.cookies.get('token')?.value;
  if (!token) return NextResponse.redirect(new URL('/login', request.url));
  try {
    await jwtVerify(token, new TextEncoder().encode(process.env.JWT_SECRET));
    return NextResponse.next();
  } catch {
    return NextResponse.redirect(new URL('/login', request.url));
  }
}

Middleware Berbasis Peran

Baca peran pengguna dari token dan alihkan ke halaman tidak berwenang jika perannya tidak memadai.

const { payload } = await jwtVerify(token, secret);
if (request.nextUrl.pathname.startsWith('/admin') && payload.role !== 'admin') {
  return NextResponse.redirect(new URL('/unauthorized', request.url));
}

Meneruskan Data ke Penangan Rute

Tetapkan header permintaan di dalam middleware untuk meneruskan data pengguna yang telah didekodekan ke komponen server tanpa mengambil ulang token.

const response = NextResponse.next();
response.headers.set('x-user-id', payload.sub as string);
response.headers.set('x-user-role', payload.role as string);
return response;

// In a Server Component:
import { headers } from 'next/headers';
const userId = headers().get('x-user-id');

Menulis Ulang URL di Middleware

Gunakan NextResponse.rewrite() untuk menampilkan halaman yang berbeda untuk suatu URL tanpa mengubah bilah alamat peramban — berguna untuk pengujian A/B atau tanda fitur.

const isInExperiment = Math.random() > 0.5;
if (isInExperiment) {
  return NextResponse.rewrite(new URL('/home-v2', request.url));
}

Geo dan IP di Middleware

Akses data geografis permintaan dan IP dari objek NextRequest untuk pengalihan atau pemblokiran berdasarkan wilayah.

const country = request.geo?.country ?? 'US';
if (country === 'XX') {
  return NextResponse.redirect(new URL('/region-blocked', request.url));
}

Performa Middleware

Middleware berjalan di setiap permintaan yang cocok pada edge. Buat middleware tetap ringan — hindari perhitungan berat atau impor berukuran besar. Gunakan hanya pustaka yang kompatibel dengan edge.

Menggabungkan Rute Terautentikasi dan Publik

Pola yang umum: lindungi semua hal kecuali daftar izin jalur publik tertentu yang diperiksa sebelum logika autentikasi.

const PUBLIC_PATHS = ['/login', '/register', '/about'];
const isPublic = PUBLIC_PATHS.some(p => request.nextUrl.pathname.startsWith(p));
if (isPublic) return NextResponse.next();

// Auth check for non-public routes
const token = request.cookies.get('token')?.value;
if (!token) return NextResponse.redirect(new URL('/login', request.url));

Pemeriksaan Singkat

Pustaka apa yang harus Anda gunakan untuk memverifikasi JWT di dalam middleware Next.js, bukan modul crypto milik Node.js?

Rangkuman

Buat middleware.ts di akar proyek dengan konfigurasi matcher. Periksa token autentikasi dengan jose yang kompatibel dengan edge, alihkan pengguna yang belum terautentikasi, dan teruskan data yang telah didekodekan ke komponen server melalui header respons. Jaga agar middleware tetap cepat dan minim dependensi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Perlindungan Rute Berbasis Middleware” gratis?

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

Apa yang akan aku pelajari di “Perlindungan Rute Berbasis Middleware”?

Gunakan middleware Next.js dan callback autentikasi untuk mengalihkan pengguna yang belum terautentikasi di edge. Kamu berlatih React 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 React Academy?

Tidak diperlukan pengalaman sebelumnya. React 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 “Perlindungan Rute Berbasis Middleware” 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 React Academy ini?

Ya. Setiap pelajaran React 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

Menyiapkan Auth.js dalam App Router Next.js
Pengelolaan Sesi & Hook useSession
Penyedia Kredensial & Login Kustom
Perlindungan Rute Berbasis Middleware

← Kembali ke React Academy