© Spirit Boom Cat/Shutterstock.com
Kolumne: Die Angular-Abenteuer

Kolumne: Die Angular-Abenteuer


Querschnittsfunktionen – das sind diese lästigen, meist technischen Anforderungen, die es immer und immer wieder zu berücksichtigen gilt. Beispiele dafür sind unter anderem Authentifizierung, Protokollierung oder die Behandlung von Fehlern. Natürlich möchte man die dafür nötigen Methodenaufrufe nicht ständig wiederholen müssen. Idealerweise werden sie automatisch aktiv. In diesem Artikel zeige ich drei Mechanismen von Angular, die genau das auf elegante Art erlauben: Guards, HTTP Interceptors und Direktiven. Alle gezeigten Beispiele können unter [1] nachgelesen werden.

Guards

Mit Guards können sich Angular-Anwendungen über Routenwechsel informieren lassen. Dabei handelt es sich lediglich um Services mit vorgegebenen Methoden, die der Router zu bestimmten Zeitpunkten aufruft. Diese Methoden können auch ins Routing eingreifen: Ihr zurückgelieferter Wert bestimmt, ob der Router den angeforderten Routenwechsel tatsächlich durchführen darf. Kann die Methode ihre Entscheidung augenblicklich bekannt geben, liefert sie einen Boolean. Um die Entscheidung hinauszuzögern, liefert sie zunächst lediglich ein Observable<boolean> oder einen Promise<boolean>. Steht die Entscheidung später fest, kann sie über diese Mechanismen den Router benachrichtigen. Dieses Vorgehen ist beispielsweise notwendig, wenn zur Entscheidungsfindung ein Web-API zu konsultieren oder Rücksprache mit dem Benutzer zu halten ist.

Für unterschiedliche Arten von Guards definiert Angular auch unterschiedliche Interfaces, die es zu implementieren gilt (Tabelle 1).

Interface

Methode

Beschreibung

CanActivate

canActivate

Legt fest, ob die gewünschte Route aktiviert werden darf

CanActivateChild

canActivateChild

Legt fest, ob bzw. welche Child Routes einer Route aktiviert werden dürfen

CanLoad

canLoad

Legt fest, ob ein Modul per Lazy Loading geladen werden darf

CanDeactivate

canDeactivate

Legt fest, ob eine Route deaktiviert werden darf

Tabelle 1: Interfaces für Guards

Wie man sich beim Betrachten dieser Interfaces denken kann, lassen sich gleich einige Arten von Querschnittsfunktionen mit Guards implementieren. Das nachfolgende Beispiel dient dem Schützen von Routen. Möchte ein Benutzer eine Route aktivieren, für die ihm die Berechtigungen fehlen, soll er auf die Log-in-Seite zurückgesendet werden (Abb. 1).

steyer_angular_1.tif_fmt1.jpgAbb. 1: Routen mit Guards schützen

Dies dient weniger der Sicherheit, zumal Sicherheit bei browserbasierten SPAs immer im Backend zu realisieren ist. Vielmehr fördert es die Benutzerfreundlichkeit, da die Anwendung den Benutzer im Fall des Falles hierdurch zur Anmeldung auffordern kann. Beim Guard handelt es sich um einen einfachen Service, der den Typ CanActivate implementiert. Neben dem hier aus Platzgründen nicht näher beschriebenen AuthService zum Anmelden von Benutzern lässt er sich auch dem Router injizieren. Damit leitet er Benutzer mit fehlenden Berechtigungen auf eine andere Route weiter (Listing 1).

Listing 1

@Injectable({ providedIn: 'root'}) export class AuthGuard implements CanActivate { constructor(private authService: AuthService, private router: Router) { } canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { if (this.authService.isLoggedIn) { return true; } else { this.router.navigate(['/home', {needLogin: true}]); return false; } } }

Die von CanActivate vorgegebene gleichnamige Methode erhält vom Router einen ActiveRouteSnapshot, der über die gewünschte Route informiert, sowie einen RouterStateSnapshot, der über die aktuelle Route Auskunft gibt. Sie wendet sich an den AuthService, um herauszufinden, ob der aktuelle Benutzer angemeldet ist. Ist dem so, retourniert sie true und erlaubt somit...

Neugierig geworden?

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang