Latihan 1: Guards dan Resolvers — Angular

Latihan 1 dari materi Guards dan Resolvers di Angular — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Starter-nya sudah punya import { Router } from '@angular/router' dan authGuard dengan const isLoggedIn = true // simulasi. Ubah jadi guard fungsi yang lengkap:

Tambahkan import { inject } from '@angular/core', dan CanActivateFn di sebelah Router: import { CanActivateFn, Router } from '@angular/router'.
Beri tipe: export const authGuard: CanActivateFn = (route, state) => { ... }.
Biarkan const isLoggedIn = true // simulasi, lalu ambil router: const router = inject(Router).
if (isLoggedIn) return true.
Selain itu, return router.parseUrl('/login').

Guard ini gak dipasang di rute mana pun di editor, jadi gak ada yang tampil; yang dinilai kodenya.

Yang dicek:

authGuard bertipe : CanActivateFn.
Kodenya memakai inject.
Ada return true (atau => true, atau isLoggedIn ? true : ...) yang ditulis apa adanya.
Ada pemanggilan parseUrl('/login') (atau createUrlTree(['/login'])) yang mengarah ke login.

Hint

Guard fungsi cukup sebuah fungsi bertipe CanActivateFn yang menjawab boleh atau gak: true untuk lanjut, UrlTree untuk mengalihkan.
Ambil Router dengan inject(Router) di awal fungsi, karena gak ada constructor. Lalu if (isLoggedIn) return true, dan sesudahnya kembalikan UrlTree ke /login.
export const authGuard: CanActivateFn = (route, state) => { const isLoggedIn = true; const router = inject(Router); if (isLoggedIn) return true; return router.parseUrl('/login') }

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Guards dan Resolvers — Angular

Hint

Memperbarui Aplikasi