Pagina's afschermen met een guard.
Het afschermen van routes is een veel voorkomende taak bij het bouwen van applicaties. Met een guard kan je voorkomen dat een gebruiker toegang krijgt tot gebieden waartoe hij niet bevoegd is.
Angular ken verschillende type guards. De meest gebruikte guard is canActivate. Deze plaats je rechtstreeks in de router. Indien de guard true is, krijgt de gebruiker toegang tot de pagina. Indien false kan je de gebruiker naar een ander pad omleiden.
Guard aanmaken.
Net zoals pipes kan je alle guards best in een eigen map bewaren. In onze toepassing hebben we maar één guard nodig. Ofwel krijgt de gebruiker toegang tot een route of niet.
Voor sommige toepassingen heb je misschien meerdere guards nodig. Denk bijvoorbeeld aan een site waarin verschillende gebruikers verschillende toegangsrechten krijgen. De administrator heeft toegang tot het admin-gedeelte van de site, gewone gebruikers dan weer niet. Voor dit soort toepassing heb je dan meerdere guards nodig.
- Maak in de map guards een auth-guard.
$ ng g g guards/auth
Router aanpassen.
- Wijzig de code op src/app/app-routing.module.ts.
Beveilig de chat-route via canActivate
Guard aanpassen.
- Wijzig de code op src/app/guards/auth.guard.ts.
- Lijn (1)
Injecteer de AuthService en de Router in de constructor. - Vanaf lijn (2)
Indien de gebruiker is ingelogd, geef je true terug. Indien hij niet is ingelogd, wordt hij naar de login-pagina omgeleid.
Auth service aanpassen.
Zodra de gebruiker inlogt, krijgt hij nog steeds de login-pagina te zien en dat komt nogal verwarrend over. Het is beter dat je hem doorverwijst naar, bijvoorbeeld, de chatpagina. Telkens de gebruiker uitlogt, komt hij terug op de login-pagina terecht.
- Wijzig de code op src/app/services/auth.service.ts.
- Lijn (1):
Injecteer de Router in de constructor. - Lijn (2):
Bij een geldige login komt de gebruiker op de chatpagina terecht.
