Angular 2 Authentifizierung: Schutz des privaten Inhalts

Dieser Artikel zeigt, wie die Authentifizierung zu einer Winkelanwendung hinzugefügt wird und bestimmte Abschnitte vor nicht autorisierten Zugriff schützt. Es ist Teil 5 eines SitePoint Angular 2 -Tutorials zum Bau einer CRUD -App mit der Winkel -Cli.

Dieses Tutorial baut auf früheren Teilen auf. Der relevante Code für diesen Teil ist als . markiert part-5

Schlüsselkonzepte:

In diesem Abschnitt werden Angular 2 und JSON Web Tokens (JWTS) für die clientseitige Sitzungsverwaltung verwendet. Ein Backend (mit

und

) behandelt Authentifizierungsanforderungen und validiert Token. Dedizierte Winkeldienste (json-server und body-parser) Verwalten Sie die Authentifizierungslogik und Sitzungsdaten. A AuthService verfügt über ein reaktives Formular für die Benutzerauthentifizierung und verhindern Routenschutz (SessionService) den nicht autorisierten Routenzugriff. Das SignInComponent ist so konfiguriert, dass JWTs in Autorisierungsheader für eine sichere API -Kommunikation aufgenommen werden. Schließlich ermöglicht eine Anmeldungsfunktion in CanActivate den Benutzern, Sitzungen zu beenden. ApiService TodosComponent

Setup:

Stellen Sie sicher, dass Sie die neueste Winkel -Cli haben:

(Verwenden Sie

npm install -g @angular/cli@latest

, um eine vorherige Version zu entfernen).

npm uninstall -g @angular/cli angular-cli; npm cache clean; npm install -g @angular/cli@latest klonen Sie das Repository, die Kasse Teil 4 und installieren Sie Abhängigkeiten:

Zugriff auf die App unter

git clone git@github.com:sitepoint-editors/angular-todo-app.git
cd angular-todo-app
git checkout part-4
npm install
ng serve

.

http://localhost:4200

Implementierung:

In diesem Artikel werden ein Backend für die Authentifizierung eingerichtet, wobei

eine Anmeldemethode hinzugefügt wird, Authentifizierungs- und Sitzungsdienste erstellt, ein

implementiert und Benutzer-Token in API-Anfragen gesendet wird. ApiService SignInComponent Die Backend (

) bearbeitet Anmeldeanforderungen und schützt Routen basierend auf der Token-Validierung. Die

enthält eine json-server.js -Methode. Die ApiService gespeichert Sitzungsdaten (Token und Benutzername). Der signIn verwendet ein reaktives Formular für die Benutzereingabe. Eine SessionService -Wache schützt Routen und sendet SignInComponent Token in Anforderungsheader. Eine Schaltfläche zur Anmeldung wird zu CanActivate. ApiService hinzugefügt TodosComponent

Authentifizierungsstrategie (JWTS):

Das Tutorial verwendet JWTS für die Kunden-Sitzungs-Sitzungsverwaltung, im Gegensatz zum serverseitigen Sitzungsmanagement mithilfe von Cookies. JWTs werden clientseitig gespeichert und nach Bedarf an den Server gesendet.

Herausforderung:

Die Herausforderung besteht darin, Sitzungsdaten über Browser -Aktualisierungen mit sessionStorage oder localStorage zu bestehen.

FAQ:

Der Artikel endet mit einem FAQ -Abschnitt, der die Angular 2 -Authentifizierung, Formularvalidierung, Implementierung der Benutzerauthentifizierung, die Rolle von Angular CLI, Handhabungsfehlern, Testen und Verwendung von Loginradius cli.

Diese überarbeitete Ausgabe behält das Originalbild und sein Format bei gleichzeitiger Paraphrasierung des Inhalts, um die Pseudooriginalität zu erreichen. Die Kerninformationen bleiben gleich, aber die Formulierung und die Satzstruktur wurden geändert.

Das obige ist der detaillierte Inhalt vonAngular 2 Authentifizierung: Schutz des privaten Inhalts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!