So verwenden Sie Cookies in Angular zum Speichern der Anmeldeinformationen des Benutzers

Blog

So verwenden Sie Cookies in Angular zum Speichern der Anmeldeinformationen des Benutzers

So verwenden Sie Cookies in Angular zum Speichern der Anmeldeinformationen des Benutzers

Durch die Verwendung von Cookies speichern wir die Anmeldedaten des Benutzers, wenn die Anmeldeinformationen des Benutzers gültig sind, werden sie auf die Dashboard-Seite geleitet.

Android Studio Datenbankinspektor

In diesem Beitrag werde ich Angular-Cookies erklären. Was ist also ein Cookie? Cookies sind wie ein kleines Informationspaket, das vom Browser des Benutzers gespeichert wird. Cookies bleiben über mehrere Anfragen und Browsersitzungen hinweg bestehen, die so eingestellt werden sollten, dass sie eine hervorragende Methode zur Authentifizierung in Webanwendungen darstellen. Manchmal haben wir Fragen, was verwendet werden soll – entweder lokaler Speicher oder Cookies? Zuvor möchte ich sagen, dass die Cookies und die lokale Speicherung unterschiedlichen Zwecken dienen.

Der lokale Speicher kann clientseitig gelesen werden, während die Cookies serverseitig gelesen werden. Der größte Unterschied ist die zu speichernde Datengröße, der lokale Speicher bietet mehr Platz zum Speichern, während das Cookie durch die Größe des zu speichernden Speichers begrenzt ist.

Wie bereits erwähnt, werden die Cookies serverseitig verwendet, während der lokale Speicher clientseitig verwendet wird. Die lokale Speicherung ist eine Möglichkeit, die Daten auf dem PC des Kunden zu speichern, indem das Schlüssel/Wert-Paar in einem Webbrowser ohne Ablaufdatum gespeichert wird. Wir werden im nächsten Artikel über die Verwendung von lokalem Speicher sprechen, also kommen wir zum Punkt, wie gesagt, die Cookies sind eine Art kleine Datei, die im Browser des Benutzers gespeichert wird.

Das Cookie ist eine kleine Tabelle, die Schlüssel- und Datenwerte enthält, daher ist es sehr nützlich, Informationen von einer Sitzung zu einer anderen zu übertragen. Sobald wir Daten auf dem Server speichern, ohne Cookies zu verwenden, wird es schwierig, die Informationen eines bestimmten Benutzers ohne Anmeldung bei jedem Besuch dieser Website abzurufen.

Bisher haben wir uns über die Übersicht über ein Cookie und dessen Verwendung informiert. In diesem Artikel werde ich nun erklären, wie Sie den Benutzernamen und das Passwort eines statischen Benutzers in der Cookie-Tabelle speichern. Also habe ich zwei Komponenten erstellt, nämlich die Login-Komponente und die Dashboard-Komponente, und ich habe einen statischen Benutzernamen und ein statisches Passwort in der Datei authservice.ts festgelegt.

Wenn sich also ein Benutzer mit den Anmeldeinformationen seines Benutzers beim Anmeldeformular anmeldet, überprüft der Authservice die Eingabe und leitet den Benutzer zum Dashboard weiter, wenn die Anmeldeinformationen des Benutzers gültig sind. Wenn die Anmeldeinformationen des Benutzers nicht gültig sind, wird eine Warnung ausgegeben, indem eine gültige E-Mail-Adresse oder ein gültiges Kennwort eingegeben wird. Und wenn auf die Dashboard-Seite durch unbefugte Nutzung zugegriffen wird, wird die Seite automatisch auf die Anmeldeseite umgeleitet.

Einrichten

Um Cookies in Angular zu verwenden, müssen wir die Angular-Cookie-Bibliothek mit dem folgenden npm-Paketmanager installieren.

npm ngx-cookie-service installieren – speichern

Nach der Installation des Paketmanagers müssen wir den Cookie-Dienst in das Innere unserer Module importieren.

Ich habe die Benutzeroberfläche der ng zorro-Bibliothek für das Formulardesign verwendet. Weitere Informationen zu ng zorro finden Sie im Folgenden Verknüpfung . Der nächste Schritt besteht darin, ein Login-Formular zu entwerfen. Öffnen Sie also die Datei login.component.html und ersetzen Sie den folgenden Code.


Login ID is required Password is required submit

Öffnen Sie nun die Datei login.component.ts und ersetzen Sie den folgenden Code darin.

import { Component, OnInit } from '@angular/core'; import { FormGroup } from '@angular/forms'; import { AuthService, User } from '../services/authservice.service'; import { Router, ActivatedRoute } from '@angular/router'; import { CookieService } from 'ngx-cookie-service'; @Component({ selector: 'nz-demo-card-simple', templateUrl: './login.component.html' }) export class LoginComponent implements OnInit { Obj: User; constructor(private srvLogin: AuthService, private router: Router, public activatedRoute: ActivatedRoute, private cookieService: CookieService) { this.Obj = new User(); } ngOnInit(): void {} onsubmit(): void { this.cookieService.set('username', this.Obj.username); this.cookieService.set('password', this.Obj.password); console.log(this.cookieService.get('username')); console.log(this.cookieService.get('password')); const a = this.Obj; if (this.srvLogin.checkLogValues(this.Obj)) { this.srvLogin.isloggedin = true; console.log(this.srvLogin.isloggedin); this.router.navigate(['/dashboard']); } } }

Der nächste Punkt besteht darin, einen Authentifizierungsdienst zu erstellen. Wir können eine Dienstdatei mithilfe der Syntax erstellen.

AuthService-Dienst generieren

Der Dienstname, den ich angegeben habe, ist Authservice und der Dienst wird erstellt und ich habe einen statischen Standardbenutzernamen und ein Passwort in der Dienstdatei angegeben, damit die Validierung ausgeführt und auf eine andere Seite (Dashboard-Seite) umgeleitet wird, wenn die Anmeldeinformationen des Benutzers gültig. Öffnen Sie die Datei Authservice service.ts, ersetzen Sie den folgenden Code und importieren Sie ihn sowohl in service als auch in die Datei app-module.ts.

import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { CookieService } from 'ngx-cookie-service'; @Injectable({ providedIn: 'root' }) export class AuthService { private username = 'vidya'; private password = '123456'; isloggedin = false; constructor(private http: HttpClient) {} checkLogValues(value: User): boolean { if (this.username === value.username && this.password === value.password) { console.log(this.username); console.log(this.password); // alert('Login valid'); return true; } else { alert('please enter valid data'); return false; } } } export class User { username: string; password: string; }

Erstellen Sie danach eine Komponente mit dem Namen Dashboard und öffnen Sie die Datei Dashboard.component.html und ersetzen Sie den folgenden Code.

Hello {{userDisplayName}} you are in Dashboard

Logout

Der nächste Schritt besteht darin, die Datei Dashboard.component.ts zu öffnen und den folgenden Code darin zu ersetzen.

import { Component, OnInit } from '@angular/core'; import { AuthService, User } from '../services/authservice.service'; import { Router, ActivatedRoute } from '@angular/router'; import { CookieService } from 'ngx-cookie-service'; @Component({ selector: 'dashboard', templateUrl: './dashboard.component.html' }) export class DashboardComponent implements OnInit { Obj: User; [x: string]: any; userDisplayName = ''; password = ''; constructor(private srvLogin: AuthService, private router: Router, public activatedRoute: ActivatedRoute, private cookieService: CookieService) { this.Obj = new User(); this.userDisplayName = this.cookieService.get('username'); this.password = this.cookieService.get('password'); this.Obj.username = this.userDisplayName; this.Obj.password = this.password; if (!srvLogin.checkLogValues(this.Obj)) { router.navigate(['/login']); } } ngOnInit(): void {} logout(): void { this.router.navigate(['/login']); this.cookieService.deleteAll(); } }

Das ist der Bildtitel

Das ist der Bildtitel

Der nächste nächste Schritt besteht darin, sich beim Dashboard anzumelden, indem Sie die Anmeldeinformationen des Benutzers angeben. Nach der gültigen Anmeldung können wir den Namen des Benutzers im Dashboard als Begrüßungsnachricht sehen, indem wir den Anmeldenamen des Benutzers verwenden. Öffnen Sie also nach dem Aufrufen der Dashboard-Seite das Entwicklertool im Browser und navigieren Sie zu -> Anwendung und wählen Sie Cookies aus dem Speicher aus. Daran können wir also sehen, dass der Benutzername und das Passwort in der Cookie-Tabelle gespeichert wurden.

Das ist der Bildtitel

Das ist der Bildtitel

Bisher haben wir uns über die Speicherung der Benutzerdaten in der Cookie-Tabelle informiert und können uns jetzt einen Überblick über das Löschen der Cookies in der Cookie-Tabelle verschaffen; Verwenden Sie dafür die Methode deleteall() zum Löschen der Cookie-Tabelle, wenn der Benutzer im Begriff ist, auf die Schaltfläche zum Abmelden zu klicken.

Abschluss

In diesem Beitrag haben wir uns mit der Verwendung von Cookies in Angular zum Speichern der Anmeldeinformationen von Benutzern befasst. Ich hoffe, dieser Artikel wird Ihnen nützlich sein.

#Angular #Angular Cookies #login #angular