Route guards are services that implement logic to allow or not fulfilling a route.
generate a guard
You can generate a guard with angular-cli:
> ng generate guard Auth
it will generate the following service:
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';
@Injectable()
export class AuthGuard implements CanActivate {
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return true
}
}
implement the decision logig
An example where the guard checks if the user is logged in.
auth.guard.ts:
export class AuthGuard implements CanActivate {
constructor(
private logginService: LogginService
){}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return this.logginService.isLoggedIn(); //here we indicate if we allow or not the page to be entered
}