Moderné webové technológie 4 - Angular - Login formulár

Zhrnutie prednášky

Prednáška nadväzuje na predchádzajúce získavanie zoznamu používateľov cez GET endpoint a rozširuje aplikáciu o autentifikáciu voči serveru. Najprv sa demonštruje prihlásenie cez Postman, kde sa na endpoint login posiela POST požiadavka s menom a heslom v tele ako JSON, a v prípade úspechu server vráti token s platnosťou 5 minút, ktorý je potrebný pre ostatné operácie (GET rozšírených dát, POST, DELETE). Následne sa buduje riešenie v Angulari — vytvára sa nový komponent login a konfiguruje sa routovanie pomocou samostatného modulu app-routing, ktorý importuje RouterModule a definuje pole ciest (routes) mapujúcich URL segmenty na komponenty (napr. users, login). Vysvetľuje sa nutnosť exportovať konfiguráciu z vytiahnutého modulu a nahradiť pevne vložený komponent v šablóne tagom router-outlet, cez ktorý router dynamicky vykresľuje príslušný komponent podľa aktuálnej URL. Ďalej sa preberajú pravidlá routingu — presmerovanie z prázdnej cesty pomocou pathMatch: 'full', rozdiel medzi full a prefix zhodou, a dôležitosť univerzálneho zachytávacieho pravidla (**) na konci poľa ciest, ktoré zobrazí komponent typu page-not-found pre neexistujúce cesty.

• - Prihlásenie prebieha cez POST na endpoint login s JSON telom (meno, heslo), server vráti token platný 5 minút.
• - Token je nutný pre prístup k ostatným endpointom (rozšírený GET, POST, DELETE nad používateľmi).
• - Vytvorenie routovania v Angulari vyžaduje samostatný modul (napr. app-routing) generovaný s parametrom --flat a --module=app.
• - Router modul definuje pole routes s objektmi obsahujúcimi path a component pre jednotlivé URL cesty.
• - Konfiguráciu vytiahnutú do samostatného modulu treba exportovať, aby bola dostupná v AppModule.
• - Tag router-outlet nahrádza pevne vložený komponent a umožňuje routeru dynamicky zobrazovať komponenty podľa URL.
• - Presmerovanie z prázdnej cesty sa rieši pomocou redirectTo a pathMatch: 'full'; pravidlo s ** na konci zachytáva neznáme cesty (page-not-found).

Zhrnutie pripravené s pomocou AI z prepisu videa.