Penjaga rute di Angular

Pelajaran ini menjelaskan cara mengamankan rute dalam aplikasi Angular menggunakan penjaga rute.

Apa itu penjaga rute?

Penjaga rute mengontrol akses ke rute di Angular. Penjaga ini berguna untuk melindungi rute yang sensitif atau dibatasi.

Jenis penjaga

• CanActivate: Menentukan apakah suatu rute dapat diaktifkan.
• CanActivateChild: Menjaga rute anak.
• CanDeactivate - Memeriksa sebelum meninggalkan suatu rute.
• Penyelesaian - Mengambil data terlebih dahulu sebelum mengaktifkan rute.

Membuat penjaga

Buat penjaga menggunakan Angular CLI:

ng generate guard auth

Menerapkan canActivate()

Metode canActivate() mengontrol akses rute:

canActivate(): boolean {
  return true; // or false to block navigation
}

Menggunakan penjaga dalam rute

Tambahkan penjaga ke rute dalam modul perutean Anda:

{ path: 'admin', component: AdminComponent, canActivate: [AuthGuard] }

Penjaga CanDeactivate

CanDeactivate mencegah Anda meninggalkan rute jika kondisi tertentu tidak terpenuhi, sehingga berguna untuk formulir:

canDeactivate(): boolean {
  return confirm('Do you really want to leave?');
}

Penjaga penyelesaian

Penjaga Resolve mengambil data sebelum rute dimuat:

resolve(route: ActivatedRouteSnapshot) {
  return this.dataService.getData(route.params.id);
}

Ringkasan

Anda telah mempelajari cara mengamankan dan meningkatkan navigasi di aplikasi Angular dengan penjaga rute. Teruskan!