Mean Stack: Erstellen Sie eine App mit Winkel und Winkel -CLI

Dieses Tutorial führt Sie durch die Benutzerauthentifizierung in einer mittleren Stapelanwendung. Wir werden eine gemeinsame Architektur verwenden: eine angulare einseitige App, die mit einem Knoten.JS-, Express- und MongoDB-basierten REST-API interagiert.

Schlüsselauthentifizierungsaspekte:

1. Benutzerregistrierung.
2. sichere Benutzerdatenspeicher (Kennwörter werden nie direkt gespeichert).
3. Benutzeranmeldung.
4. Sitzung Persistenz über Seitenbesuche hinweg.
5. Zugriffskontrolle für geschützte Seiten (nur für angemeldete Benutzer zugänglich).
6. dynamische UI -Updates basierend auf dem Anmeldestatus (z. B. Anzeigen der Schaltfläche "Login" oder "Mein Profil").

Mittelstapel -Authentifizierungs -Workflow:

• Benutzerdaten (mit Hashed -Passwörtern) befinden sich in MongoDB.
• CRUD (erstellen, lesen, aktualisieren, löschen) Funktionen werden in der API Express -API implementiert.
• Die Winkel -App interagiert mit der API und behandelt Antworten.
• Die Express -API generiert JSON Web Tokens (JWTS) nach Registrierung/Anmeldung und sendet sie an die Angular App.
• Die Angular App speichert das JWT, um Benutzersitzungen zu verwalten.
• Die Winkel -App überprüft die JWT -Gültigkeit für geschützte Ansichten.
• Die Winkel -App sendet das JWT zurück, um beim Zugriff auf geschützte API -Routen auszudrücken.

JWTs werden gegenüber Cookies für das Browser -Sitzungsmanagement bevorzugt. Cookies eignen sich besser für serverseitige Anwendungen.

Beispielanwendung:

Der Code ist auf GitHub verfügbar. Sie benötigen node.js und mongoDB installiert (siehe Dokumentation von MongoDB für Installationsanweisungen unter Windows, Linux und MacOS).

Winkel -App -Struktur:

Die Winkel -App umfasst vier Grundseiten:

1. Homepage
2. Register -Seite
3. Login -Seite
4. Profilseite (nur auf authentifizierte Benutzer zugänglich)

Die Winkel -CLI wird zum Erstellen und Ausführen des lokalen Servers verwendet. Weitere Informationen finden Sie im Tutorial "Bauen einer Todo -App mit Angular CLI", um bei Bedarf eine Anleitung zu erhalten.

REST -API -Struktur:

Die Node.js-, Express- und MongoDB -REST -API enthält zunächst die folgenden Routen:

1. /api/register (Post): Verwaltet die Benutzerregistrierung.
2. /api/login (Post): Handle Benutzeranmeldung.
3. /api/profile/:userid (get): Ruft Profildetails ab.

Einrichten der API:

Verwenden Sie das Tool express-generator (installieren Sie mit npm i -g express-generator), um die Express -App zu erstellen:

express -v pug mean-authentication
cd mean-authentication
npm i
npm i pug@latest
npm i mongoose

Erstellen Sie die erforderliche Verzeichnisstruktur und -dateien, wie im ursprünglichen Tutorial beschrieben. Die app.js, die Datenbankverbindung (api/models/db.js), die API -Routen (api/routes/index.js) und die anfänglichen Controller -Stubs (api/controllers/authentication.js und api/controllers/profile.js) sind bereitgestellt.

MongoDB -Schema mit Mongoose:

Die Datei api/models/users.js definiert das MongoDB -Schema mit Mongoose:

const mongoose = require('mongoose');
const crypto = require('crypto');
const jwt = require('jsonwebtoken');

// ... (Schema definition and setPassword, validPassword, generateJwt methods as described in the original tutorial)

Passwortverwaltung (Hashing und Salzen):

Die Methoden setPassword und validPassword verwenden das crypto -Modul, um Kennwörter sicher zu verarbeiten, ohne sie direkt zu speichern. Die generateJwt -Methode verwendet das jsonwebtoken -Paket, um JWTs zu erstellen.

passport.js zur Authentifizierung:

Passpass und die lokale Strategie installieren:

npm i passport passport-local

passpass in api/config/passport.js:

konfigurieren

// ... (Passport configuration as described in the original tutorial)

update app.js, um den Passport als Middleware zu initialisieren.

API -Endpunktkonfiguration:

Vervollständigen Sie die Dateien api/controllers/authentication.js und api/controllers/profile.js mit der Logik Register, Anmeldung und Profil, einschließlich der JWT-Generierung und -authentifizierung mit Passport.js und Express-JWT-Middleware. Sichern Sie die /api/profile Route mit express-jwt.

Winkel -App -Initialisierung und -Dienst:

Erstellen Sie die Winkel -App mit der CLI:

ng new client

generieren Sie die erforderlichen Komponenten (register, login, profile, home) und einen Dienst (authentication). Implementieren Sie die AuthenticationService, um JWT -Speicher-, Abruf-, Lösch-, API -Aufrufe, Anmeldestatusprüfungen und Abrufen von Benutzerdetails zu verarbeiten.

.

Verbindungswinkelkomponenten und API:

AuthenticationService Implementieren Sie die Register- und Anmeldeformulare in den jeweiligen Komponenten unter Verwendung der /profile -Api -Interaktionen. Aktualisieren Sie die Navigationsleiste, um "Anmelden" oder den Namen und den Profilverbindungslink des Benutzers basierend auf dem Anmeldestatus dynamisch anzuzeigen. Schützen Sie die AuthGuard -Route mit einem Winkelroutenschutz (/api/profile). Implementieren Sie schließlich die Profilseite, um Benutzerdetails aus der geschützten

-API -Route zu holen und anzeigen.

Ausführen der Anwendung:

client/proxy.conf.json Konfigurieren Sie einen Proxy in /api, um

Anforderungen an den Express -Server weiterzuleiten. Starten Sie den Express -Server und die Angular App. Testen Sie Registrierung, Anmeldung und Profilzugriff. Fügen Sie das Styling wie gewünscht hinzu (finden Sie im GitHub -Repository, um Details zu stylen).

häufig gestellte Fragen (FAQs):

Der FAQS -Abschnitt enthält Antworten auf häufige Fragen zur mittleren Stapelentwicklung, einschließlich der Unterschiede zu anderen Frameworks, der Rolle der Winkel -CLI, der Datenbankoptionen, der Datenbearbeitung, der Skalierbarkeit, der Sicherheit, der Lernressourcen und der Rolle von Knoten.js. Die Antworten werden für Selbstverständlichkeit und Klarheit umgestellt.

Das obige ist der detaillierte Inhalt vonMean Stack: Erstellen Sie eine App mit Winkel und Winkel -CLI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!