Guards in Angular

Guards in Angular sind Services, die verwendet werden, um den Zugriff auf bestimmte Routen oder Teile der Anwendung zu kontrollieren. Sie können verwendet werden, um zu bestimmen, ob ein Benutzer bestimmte Aktionen ausführen darf oder ob er zunächst bestimmte Bedingungen erfüllen muss, bevor er auf eine bestimmte Route oder einen bestimmten Teil der Anwendung zugreifen darf.

CanActivate

CanActivate ist ein Guard, der verwendet wird, um zu entscheiden, ob eine bestimmte Route aktiviert werden darf oder nicht. Es wird typischerweise verwendet, um den Zugriff auf bestimmte Teile der Anwendung zu beschränken. Wenn der Guard entscheidet, dass der Benutzer nicht auf die Route zugreifen darf, wird die Navigation zu der Route unterbunden und der Benutzer bleibt auf der aktuellen Route.

Um CanActivate zu verwenden, musst du zunächst eine Klasse erstellen, die das CanActivate -Interface implementiert. Dieses Interface verlangt, dass du eine Methode namens canActivate definierst, die einen boolean-Wert zurückgibt. Wenn die Methode true zurückgibt, darf die Navigation zu der Route ausgeführt werden. Wenn sie false zurückgibt, wird die Navigation unterbunden.

Hier ist ein Beispiel für eine Klasse, die CanActivate implementiert:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): boolean {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

CanActivateChild

CanActivateChild ist ein Guard, der verwendet wird, um zu entscheiden, ob eine bestimmte Child-Route aktiviert werden darf oder nicht. Es ist ähnlich wie CanActivate, aber es wird auf die Child-Routes einer Route angewendet, anstatt auf die Route selbst.

Um CanActivateChild zu verwenden, musst du zunächst eine Klasse erstellen, die das CanActivateChild -Interface implementiert. Dieses Interface verlangt, dass du eine Methode namens canActivateChild definierst, die einen boolean-Wert zurückgibt. Wenn die Methode true zurückgibt, darf die Navigation zu der Kind-Route ausgeführt werden. Wenn sie false zurückgibt, wird die Navigation unterbunden.

Auch CanActivateChild wird in den Routes definiert, allerdings vor dem children-Block:

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    canActivateChild: [AuthGuard],
    children: [
      { path: 'profile', component: ProfileComponent },
      { path: 'settings', component: SettingsComponent }
    ]
  },
  { path: 'login', component: LoginComponent }
];

CanDeactivate

CanDeactivate ist ein Guard, der verwendet wird, um zu entscheiden, ob der Benutzer von einer bestimmten Route weg navigieren darf oder nicht. Es wird häufig verwendet, um sicherzustellen, dass der Benutzer keine ungespeicherten Änderungen verliert, wenn er von der Route weg navigiert.

Um CanDeactivate zu verwenden, musst du zunächst eine Klasse erstellen, die das CanDeactivate-Interface implementiert. Dieses Interface verlangt, dass du eine Methode namens canDeactivate definierst, die einen boolean-Wert oder ein Observable, das einen boolean-Wert emittet, zurückgibt. Wenn die Methode true zurückgibt, darf die Navigation von der Route fortgesetzt werden. Wenn sie false zurückgibt, wird die Navigation unterbunden und der Benutzer bleibt auf der aktuellen Route.

Hier ist ein Beispiel für eine Klasse, die CanDeactivate implementiert:

import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { EditComponent } from './edit.component';

@Injectable({
  providedIn: 'root'
})
export class CanDeactivateGuard implements CanDeactivate<EditComponent> {
  canDeactivate(component: EditComponent): boolean {
    if (component.hasUnsavedChanges()) {
      return window.confirm('You have unsaved changes. Are you sure you want to leave?');
    }
    return true;
  }
}

Um den Guard zu verwenden, musst du ihn zunächst in deiner Anwendung registrieren. Dies kann entweder direkt in der Route-Konfiguration oder in einem separaten Modul geschehen. Hier ist ein Beispiel, wie man den oben definierten Guard in der Route-Konfiguration verwendet:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { EditComponent } from './edit/edit.component';
import { CanDeactivateGuard } from './can-deactivate.guard';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'edit', component: EditComponent, canDeactivate: [CanDeactivateGuard] }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Hier wird der CanDeactivate-Guard verwendet, um sicherzustellen, dass der Benutzer keine ungespeicherten Änderungen verliert.

CanLoad

CanLoad ist ein Guard, der verwendet wird, um zu entscheiden, ob ein bestimmtes Lazy-Loaded-Modul geladen werden darf oder nicht. Es wird häufig verwendet, um den Zugriff auf bestimmte Teile der Anwendung zu beschränken. Wenn der Guard entscheidet, dass das Modul nicht geladen werden darf, wird das Modul nicht geladen und der Benutzer bleibt auf der aktuellen Route.

(Mehr zum Thema Lazy Loading findest du in meinem anderen Beitrag Angular: Lazy Loading)

Um CanLoad zu verwenden, musst du zunächst eine Klasse erstellen, die das CanLoad -Interface implementiert. Dieses Interface verlangt, dass du eine Methode namens canLoad definierst, die einen boolean-Wert oder ein Observable, das einen boolean-Wert emittet, zurückgibt. Wenn die Methode true zurückgibt, darf das Modul geladen werden. Wenn sie false zurückgibt, wird das Modul nicht geladen.

Hier ist ein Beispiel für eine Klasse, die CanLoad implementiert:

import { Injectable } from '@angular/core';
import { CanLoad } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanLoad {
  constructor(private authService: AuthService) {}

  canLoad(): boolean {
    return this.authService.isLoggedIn();
  }
}

Um den Guard zu verwenden, musst du ihn zunächst in deiner Anwendung registrieren. Dies kann entweder direkt in der Route-Konfiguration oder in einem separaten Modul geschehen. Hier ist ein Beispiel, wie man den oben definierten Guard in der Route-Konfiguration verwendet:

import { NgModule } from '@angular/core';
import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'admin', loadChildren: './admin/admin.module#AdminModule', canLoad: [AuthGuard] }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: PreloadAllModules
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Hier wird der AuthGuard verwendet, um sicherzustellen, dass der Benutzer nur auf das Admin-Modul zugreifen kann, wenn er angemeldet ist.