0Pricing
React Academy · Pelajaran

Rute Terlindungi & Penjaga Autentikasi

Alihkan pengguna yang belum terautentikasi ke halaman masuk menggunakan komponen pembungkus atau penjaga berbasis loader.

Rute Terlindungi & Penjaga Autentikasi adalah pelajaran React Academy gratis di CoddyKit. Ini adalah pelajaran 3 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.

Mengapa Rute Perlu Dilindungi?

Beberapa halaman (dasbor, profil, admin) seharusnya hanya dapat diakses oleh pengguna yang terautentikasi. React Router menyediakan dua pendekatan: komponen pembungkus dan penjaga berbasis pemuat.

Struktur Auth State

Pertama, buat context autentikasi yang dapat dibaca komponen untuk mengetahui apakah pengguna sudah login.

const AuthContext = React.createContext(null);

function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const login = async (creds) => { const u = await apiLogin(creds); setUser(u); };
  const logout = () => setUser(null);
  return (
    <AuthContext.Provider value={{ user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export const useAuth = () => useContext(AuthContext);

Penjaga Komponen Pembungkus

Buat komponen PrivateRoute yang memeriksa autentikasi dan mengalihkan pengguna ke halaman login jika pengguna belum terautentikasi.

import { Navigate, Outlet } from 'react-router-dom';

function PrivateRoute() {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
  return <Outlet />;
}

// Usage in router:
{ element: <PrivateRoute />, children: [
  { path: '/dashboard', element: <Dashboard /> },
]}

Mempertahankan URL Pengalihan

Simpan URL yang coba diakses agar Anda dapat mengirim pengguna kembali setelah login. Teruskan URL tersebut melalui state pada komponen Navigate.

function PrivateRoute() {
  const { user } = useAuth();
  const location = useLocation();
  if (!user) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  return <Outlet />;
}

// In login handler:
const location = useLocation();
const from = location.state?.from?.pathname || '/';
navigate(from, { replace: true });

Penjaga Berbasis Pemuat (Data Router)

Dalam API Data Router, tambahkan pemeriksaan autentikasi ke loader rute. Lemparkan pengalihan jika pengguna belum terautentikasi.

import { redirect } from 'react-router-dom';

function requireAuth() {
  const token = localStorage.getItem('token');
  if (!token) throw redirect('/login');
  return token;
}

const router = createBrowserRouter([
  {
    path: '/dashboard',
    loader: requireAuth,
    element: <Dashboard />,
  },
]);

Penjaga Berbasis Peran

Perluas penjaga untuk memeriksa peran. Alihkan pengguna ke halaman tanpa izin jika pengguna tidak memiliki peran yang diperlukan.

function AdminRoute() {
  const { user } = useAuth();
  if (!user) return <Navigate to="/login" replace />;
  if (user.role !== 'admin') return <Navigate to="/unauthorized" replace />;
  return <Outlet />;
}

Status Pemuatan Selama Pemeriksaan Autentikasi

Jika status autentikasi dimuat secara asinkron (misalnya dari server), tampilkan indikator pemuatan saat pemeriksaan masih berlangsung untuk mencegah halaman login muncul sekilas.

function PrivateRoute() {
  const { user, isLoading } = useAuth();
  if (isLoading) return <Spinner />;
  if (!user) return <Navigate to="/login" replace />;
  return <Outlet />;
}

Melindungi Beberapa Rute Sekaligus

Kelompokkan semua rute yang dilindungi di bawah satu pembungkus PrivateRoute agar Anda tidak perlu mengulangi penjaga pada setiap rute.

const router = createBrowserRouter([
  { path: '/login', element: <Login /> },
  {
    element: <PrivateRoute />,
    children: [
      { path: '/dashboard', element: <Dashboard /> },
      { path: '/profile', element: <Profile /> },
      { path: '/settings', element: <Settings /> },
    ],
  },
]);

Menangani Kedaluwarsa Token

Periksa kedaluwarsa token di dalam penjaga atau pencegat global, lalu keluarkan pengguna saat token kedaluwarsa dan alihkan ke halaman login.

function isTokenValid(token) {
  const payload = JSON.parse(atob(token.split('.')[1]));
  return payload.exp * 1000 > Date.now();
}

function requireAuth() {
  const token = localStorage.getItem('token');
  if (!token || !isTokenValid(token)) throw redirect('/login');
  return token;
}

Alur Token Penyegaran

Sebelum melakukan pengalihan akibat 401, coba segarkan token terlebih dahulu. Alihkan pengguna ke halaman login hanya jika penyegaran juga gagal.

async function requireAuth() {
  let token = localStorage.getItem('token');
  if (!token || isExpired(token)) {
    token = await refreshToken();
    if (!token) throw redirect('/login');
    localStorage.setItem('token', token);
  }
  return token;
}

Mempertahankan Autentikasi Saat Muat Ulang

Simpan token autentikasi di localStorage atau kuki HttpOnly. Saat aplikasi dimuat, pulihkan status autentikasi sebelum merender rute yang dilindungi.

Pemeriksaan Cepat

Saat menggunakan penjaga autentikasi berbasis pemuat dalam React Router, apa yang harus Anda lemparkan untuk mengalihkan pengguna yang belum terautentikasi?

Ringkasan

Lindungi rute dengan pembungkus PrivateRoute menggunakan <Outlet /> atau pemuat yang melemparkan redirect(). Pertahankan URL yang dituju dalam status navigasi, tangani status pemuatan untuk mencegah halaman muncul sekilas, dan kelompokkan rute yang dilindungi agar tidak terjadi pengulangan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Rute Terlindungi & Penjaga Autentikasi” gratis?

Ya — teks lengkap “Rute Terlindungi & Penjaga Autentikasi” 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 “Rute Terlindungi & Penjaga Autentikasi”?

Alihkan pengguna yang belum terautentikasi ke halaman masuk menggunakan komponen pembungkus atau penjaga berbasis loader. 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 3 dari 4.

Berapa lama pelajaran “Rute Terlindungi & Penjaga Autentikasi” 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

  1. Rute Bertingkat & Tata Letak Outlet
  2. Loader & Actions (API Router Data)
  3. Rute Terlindungi & Penjaga Autentikasi
  4. Mengelola Status dalam Parameter Pencarian URL
← Kembali ke React Academy