Angular Academy · Pelajaran

Penjaga Rute Fungsional

Lindungi rute dengan penjaga fungsional.

Pelajaran 3 dari 413 langkah

Penjaga Rute Fungsional adalah pelajaran Angular 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 Angular Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Angular Academy mencakup 4 pelajaran total.

Apa itu penjaga rute

Penjaga menentukan apakah navigasi boleh dilanjutkan: melindungi rute dengan auth, meminta konfirmasi sebelum meninggalkan formulir, atau membatasi akses berdasarkan peran. Angular modern menggunakan penjaga fungsional — fungsi biasa, bukan kelas.

CanActivateFn

CanActivateFn mengembalikan true untuk mengizinkan, false untuk memblokir, UrlTree untuk mengarahkan ulang, atau observable/promise yang berisi salah satunya.

import { CanActivateFn } from '@angular/router';
import { inject } from '@angular/core';

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.isLoggedIn();
};

Menghubungkan guard ke rute

Pasang guard dengan canActivate (berupa array, sehingga Anda dapat menumpuk beberapa guard).

export const routes = [
  { path: 'dashboard', component: DashboardComponent,
    canActivate: [authGuard] }
];

Mengalihkan dengan UrlTree

Mengembalikan UrlTree (dari router.createUrlTree atau parseUrl) sekaligus memblokir dan mengalihkan dalam satu langkah.

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  const router = inject(Router);
  return auth.isLoggedIn() ? true : router.parseUrl('/login');
};

Guard asinkron

Guard dapat mengembalikan observable—router menunggu nilai pertama, lalu menyelesaikannya.

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.checkSession$().pipe(
    map(ok => ok ? true : inject(Router).parseUrl('/login'))
  );
};

Mengakses informasi rute dalam guard

CanActivateFn menerima ActivatedRouteSnapshot dan RouterStateSnapshot, sehingga Anda dapat membaca parameter, data, dan URL yang sedang dicoba.

export const roleGuard: CanActivateFn = (route, state) => {
  const needed = route.data['role'];
  const auth = inject(AuthService);
  return auth.hasRole(needed);
};

Guard canMatch

CanMatchFn menentukan apakah suatu definisi rute benar-benar cocok—berguna untuk menukar rute berdasarkan tanda fitur atau melakukan pemuatan lambat hanya jika diizinkan.

import { CanMatchFn } from '@angular/router';

export const featureGuard: CanMatchFn = () =>
  inject(FeatureService).enabled('beta');

Guard canDeactivate

CanDeactivateFn dijalankan saat meninggalkan rute—sangat cocok untuk konfirmasi perubahan yang belum disimpan. Guard ini menerima instans komponen.

import { CanDeactivateFn } from '@angular/router';

export const unsavedGuard: CanDeactivateFn<FormComponent> =
  (component) => component.isPristine() || confirm('Discard changes?');

Menumpuk beberapa guard

Semua guard dalam array harus mengizinkan navigasi. Guard dijalankan bersama; jika salah satunya mengembalikan false atau UrlTree, navigasi akan diblokir atau dialihkan.

canActivate: [authGuard, roleGuard]
// both must pass

Mengapa guard fungsional lebih baik daripada guard berbasis kelas

Guard fungsional lebih sederhana: tidak memerlukan kode boilerplate @Injectable, mudah menggunakan inject(), dapat dikomposisikan, dan dapat dihapus oleh tree-shaking. Antarmuka CanActivate berbasis kelas sudah tidak digunakan lagi.

Guard dan rute anak

canActivateChild melindungi semua rute anak dari induk di satu tempat, sehingga Anda tidak perlu mengulang guard pada setiap anak.

{ path: 'admin', canActivateChild: [authGuard],
  children: [ /* all protected */ ] }

Pemeriksaan Singkat

Uji pemahaman Anda tentang guard fungsional.

Jawab di pelajaran interaktif

Ringkasan: Guard Rute Fungsional

Guard fungsional mengendalikan navigasi dengan fungsi biasa.

CanActivateFn: mengizinkan/memblokir/mengalihkan (UrlTree).
CanMatchFn: menentukan apakah suatu rute cocok.
CanDeactivateFn: mengonfirmasi saat meninggalkan rute.
Gunakan inject() untuk layanan; tumpuk guard dalam array.

Berikutnya: peristiwa router dan navigasi.

Gratis untuk memulai

Belajar HTML dengan tutor AI — gratis

Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.

Kursus: 38
Pelajaran: 144

Mulai belajar gratis Lihat kursus lengkapnya

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Penjaga Rute Fungsional” gratis?

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

Apa yang akan aku pelajari di “Penjaga Rute Fungsional”?

Lindungi rute dengan penjaga fungsional. Kamu berlatih Angular 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 Angular Academy?

Tidak diperlukan pengalaman sebelumnya. Angular 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 “Penjaga Rute Fungsional” 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 Angular Academy ini?

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