Blue sky and clouds

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.

Screenshot vom Code des Module Providers
Module Providers

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.

Screenshot vom Code des Auth-Guard-Service
Auth-Guard-Service

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.

Screenshot vom Code des User-Service
User-Service

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.

Screenshot vom Code der Definition der Routen
Definition der Routen

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.

Screenshot vom Code der Role Guard
Role Guard

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.

Blog

9 Tipps & Tricks für Angular

Angular ist unter Webentwicklern ein beliebtes Framework für das Programmieren von Web-, Desktop- und mobilen Anwendungen. Neun Tipps & Tricks für Angular-Einsteiger und Profis.

Blog 16.05.24

Angular 18: Das nächste Kapitel

Angular 18 bringt Leistungsverbesserungen, neue Features und Entwicklerwerkzeuge mit sich. Erfahren Sie mehr über Zoneless Angular, verbesserte Bundling-Strategien und Barrierefreiheitsverbesserungen.

novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog 22.03.18

Angular 5 Custom Filter in Angular Material Data-Table

In diesem Blogbeitrag will ich euch darlegen, wie man einen Custom Filter für das Angular Material Data-Table Modul erstellt.

Hands of man using online virtual app on mobile phone. Millennial guy chatting on smartphone, using banking services, reading text message, typing, shopping, making call, browsing internet. Close up
Blog 28.05.18

Struktureller Aufbau eines Angular Modules

Dieser Blogbeitrag beschäftigt sich mit dem strukturellen Aufbau eines Angular Modules und der Kommunikation der einzelnen Komponenten.

Teaserbild Angular
Offering

One Identity Angular-Umstellung meistern – jetzt informieren

Was bedeutet der Wechsel des One Identity Managers nach Angular für Unternehmen? Welche Migrations-Szenarien gibt es? Wir zeigen WIE! ✅

Blog 06.11.23

Hurra, hurra - Angular Version 17 ist da!

Erfahren Sie, welche aufregenden neuen Funktionen und Verbesserungen Angular Version 17 mit sich bringt. Von der neuen deklarativen Control Flow Syntax bis hin zum Deferred Loading uvm.

Vogelperspektive Laptop Tastaturen
Training_Anfrage

Angular Grundlagen

Vogelperspektive Laptop Tastaturen
Training_Master

Angular Vertiefung

Vogelperspektive Laptop Tastaturen
Training_Anfrage

Angular Vertiefung

Vogelperspektive Laptop Tastaturen
Training_Master

Angular Grundlagen

GCP Google Cloud Platform
Unternehmen 22.07.20

Digital ist heute

Jedes Mitglied unseres Teams versteht, dass die Digitalisierung keinen Halt macht, denn #Digitalistheute.

novaCapta: Ihr Partner für die digitale Transformation mit Microsoft Technologien
Blog 30.10.19

Testen von Angular Anwendungen mit Cypress

Cypress ist ein End-to-End Testing Framework, mit dem man einfache Tests erstellen kann, die in Echtzeit ausgeführt werden. Mit Cypress kann man auch Snapshots von den einzelnen Schritten während der Testausführung sehen. Tests können schnell erstellt werden, ohne dass bestimmte Server oder Driver benötigt werden.

Unsere Office-Managerin in catworkx behind the scenes
Blog

catworkx behind the scenes: Was macht catworkx eigentlich?

Wer oder was ist catworkx eigentlich, was machen wir hier? Was bieten wir unseren Kunden an, was können diese von uns erwarten? Was ist unser Schwerpunkt und wer ist Atlassian?

Schaltzentrale der Finalshow des ESC 2018
Referenz

Riedel: Synchrone Vertriebsdaten dank Microsoft BizTalk

novaCapta unterstützt die erfolgreiche Einführung eines neuen CRM bei Riedel Communications in Wuppertal mit einer schlanken Lösung aus BizTalk Server und Generic Router Translator Framework.

News

Zukunft zum Anfassen - Das war die INSIGHTS 2025

Was haben Delfine mit Pferderennen zu tun? Wie viele Kalorien stecken in 576 Tafeln Schokolade? Und was denkt eigentlich mein Hund?

Monthly Update

Monthly Update Aug. 2022

Das catworkx-Team wächst kontinuierlich, was uns sehr freut. Doch wer und wie sind eigentlich die Menschen und Teams, die bei catworkx arbeiten? Welche Abteilungen gibt es?

Mitarbeiter auf der Reise in die Microsoft Cloud
Whitepaper

Whitepaper: So gelingt Ihre Reise in die Microsoft Cloud

Was ist eigentlich "die Cloud" und was bringt Unternehmen das Cloud Computing? Unser Whitepaper bietet einen Überblick zu Definition, Services, Modellen und Sicherheit.

Webinar on demand

Agilität skalieren – Erfolgsfaktoren aus der Praxis

Agiles Arbeiten und agile Methoden sind aus der modernen Arbeitswelt nicht mehr wegzudenken. Aber was bedeutet es und vor allem was erwartet ein Unternehmen eigentlich, wenn es sich auf diese Reise begibt?

Blog

catworkx behind the scenes: “Der Herr der Bildschirme”

In unserem neuen Blogartikel werfen wir mal einen Blick hinter die Kulissen und schauen, wer bei catworkx eigentlich so arbeitet. Heute: “Der Herr der Bildschirme”

Business colleagues working and analyzing financial figures on a
Whitepaper

Whitepaper: Tenant to Tenant Migration

Worauf kommt es bei einer erfolgreichen Microsoft 365 Tenant to Tenant Migration an? Wie lassen sich verschiedene Mandanten konsolidieren und welche Vorteile bietet das eigentlich?

Bleiben Sie mit dem TIMETOACT GROUP Newsletter auf dem Laufenden!