Angular: Guards

Sind sehr gut um Routes zu schutzen und unwillige verlassen von seite zu verhindern oder erlauben.

Guards sind in Route folgende Arten möglich

  • CanDeactivate- entscheidet ob eine route deaktiviert werden kann
  • CanActivate- – entscheidet ob eine route aktiviert werden kann
  • CanActivateChild– entscheidet ob eine kinder route eine route aktiviert werden kann
  • CanLoad- entscheidet ob module lazy loaden kann

Um Guards zu implementieren ist wichtig dass am ende eine Observable<boolean>, Promise<boolean> oder boolean zurück kommt. Die Guards sollte man per Provider registeriern und ggf. in Angular Injecten wenn benötigt.

Eine weg ist in Routes anzugeben. Da ist halt manchmal so dass wir benötigen wir DI und verarbeitung von logik diese können wir denn in eine andere klasse rein machen welche denn eine diese Interfaces  zbs. CanDeactivate implementieren kann.

CanActivate Beispiel

@Injectable()
export class CanActivateViaAuthGuard implements CanActivate {
constructor(private authService: AuthService) {}
canActivate() {
    return this.authService.isLoggedIn();
  }
}

CanDeactivate Beispiel

export interface CanComponentDeactivate {
    canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
    constructor(private confirmationService: ConfirmationService) {
    }
    canDeactivate(component: CanComponentDeactivate) {
        let noChanges = component.canDeactivate ? component.canDeactivate() : true;
        if (!noChanges) {
            return Observable.create((observer: Observer<boolean>) => {
                this.confirmationService.confirm({
                    message: 'Do u realy wanna quit',
                    accept: () => {
                        observer.next(true);
                        observer.complete();
                    },
                    reject: () => {
                        observer.next(false);
                        observer.complete();
                    }
                });
            });
        }
        return true;
    }
}

Wichtig ist wie dass nach diese beispiel kann man in Jeder Component jetzt canDeactivate() methode benutzen und es mit ggf. mit logik der Formular verbinden oder sonstiges wenn man route deactivieren möchte.