Was versteht man unter Angular Route-Guards?

Was versteht man eigentlich unter Angular Route-Guards?

Die Guards sagen dem Router, ob eine Route aufgerufen werden kann oder nicht.  Von den Guards gibt es verschiedene Typen, die in einer bestimmten Reihenfolge aufgerufen werden und das Verhalten des Routers beeinflussen.

CanActivate
Überprüft, ob ein Benutzer eine Route besuchen kann.

CanActivateChild
Überprüft, ob ein Benutzer eine Route für Kinder besuchen kann.

CanDeactivate
Prüft, ob ein Benutzer eine Route verlassen kann.

Resolve
Führt den Abruf von Routendaten vor dem Routen-Wechsel durch.

CanLoad
Überprüft, ob ein Benutzer zu einem Modul weitergeleitet werden kann, bei lazy loading

Guards werden als Service implementiert, die auch im Modul unter den Providern eingetragen werden müssen. Außerdem liefern sie „true“ zurück, wenn eine Route aufgerufen werden kann oder „false“ wenn nicht.

Auth-Guard-Service

Unser AuthGuardService implementiert das “CanActivate” Interface und liefert „true“ zurück, wenn der User erfolgreich eingeloggt ist. Ansonsten wird zu dem Login-Formular weitergeleitet.
Die Abfrage, ob der User eingeloggt ist, erfolgt über den eingeschleusten UserService.

User Service

In unserem Beispiel liefert der UserService bei der Methode „isLoggedIn“ immer „true“ zurück. Dies kann natürlich zum Testen auch auf „false“ gesetzt werden oder gleich mit der richtigen Logik versehen werden.

Routen

In der folgenden Abbildung sieht man die Definition unserer Routen für das TimeTracking Module. Die Route „timetracking“ kann nur aufgerufen werden, wenn der AuthGuard „true“ zurück liefert und die Route „timetracking/controlling“ kann nur aufgerufen werden, wenn der RoleGuard „true“ zurück gibt.

Role Guard

Beim „RoleGuard“ wird überprüft, ob die Rolle im localstorage der definierten Rolle in der Route entspricht, welche in unserem Fall „admin“ ist und der User eingeloggt ist.

Security

Ein wichtiger Punkt ist natürlich die Sicherheit, deswegen sollten die Daten nie in Klartext in den „localstorage“ geschrieben werden, sondern immer mit einer Library wie JSON Web Tokens (https://jwt.io) verschlüsselt werden. Sobald der User manuelle Änderungen vornimmt, verliert der Token dann seine Gültigkeit. Sensible Daten sollten natürlich immer Backend-seitig abgesichert werden.