Persistenza dei dati in Angular con angular-web-storage
Angular ha tantissime librerie / estensioni per ogni evenienza.
Oggi vediamo angular-web-storage, che ci permette di salvare i dati degli utenti nei classici LocalStorage e SessionStorage di Javascript.
Prima di tutto, da terminale, spostiamoci nella cartella del progetto e digitiamo questo comando:
$ npm install angular-web-storage --save
Questo installerà localmente la libreria.
Detto ciò, ci sono vari modi per usare LocalStorage / SessionStorage; ci sono vari esempi sul sito.
Qui sotto il mio component di login:
import { Component, OnInit } from '@angular/core';
import { Title } from '@angular/platform-browser';
import { Validators, FormControl, FormGroup, FormBuilder } from '@angular/forms';
import { Router } from "@angular/router"
import { MessageService } from 'primeng/api';
import { SessionStorageService } from 'angular-web-storage';
import { JhttpService } from '../jhttp.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css'],
providers: [MessageService]
})
export class LoginComponent implements OnInit {
userform: FormGroup;
submitted: boolean;
description: string;
user = this.session.get('USER');
constructor(
private titleService: Title,
private fb: FormBuilder,
private messageService: MessageService,
private jhttpService: JhttpService,
private session: SessionStorageService,
private router: Router
) { }
ngOnInit() {
if (this.user) {
this.router.navigate(['/']);
}
this.titleService.setTitle('Login');
this.userform = this.fb.group({
'username': new FormControl('jana.kuhn@gmail.com', Validators.required),
'password': new FormControl('123456', Validators.required)
});
}
onSubmit() {
this.jhttpService.login(this.userform.value.username,
this.userform.value.password)
.subscribe(
response => {
if (!response.error) {
var user = {
'id': response.user.id,
'nome': response.user.name,
'email': response.user.email,
'api_key': response.api_key,
'id_clfo': response.user.ut_id
}
this.session.set('USER', user);
this.router.navigate(['/home']);
} else {
}
}, error => {
}
);
}
onConfirm() {
}
showError(error) {
}
}
Qui ho usato "la versione" con i service (SessionStorageService),
In ngOnInit faccio un controllo (vi riporto una parte del codice):
user = this.session.get('USER');
..................
ngOnInit() {
if (this.user) {
this.router.navigate(['/']);
}
..............
}
Se è presente lo rimando nella home page.
Sotto invece intercetto il click sul bottone, ed interrogo un web service per il login.
Se è tutto ok:
onSubmit() {
this.jhttpService.login(this.userform.value.username,
this.userform.value.password)
.subscribe(
response => {
if (!response.error) {
var user = {
'id': response.user.id,
'nome': response.user.name,
'email': response.user.email,
'api_key': response.api_key,
'id_clfo': response.user.ut_id
}
this.session.set('USER', user);
this.router.navigate(['/home']);
} else {
}
}, error => {
}
);
}
Se già conoscete localStorage e sessionStorage, potete vedere che sono molto simili da usare.
Enjoy!
javascript angular localstorage sessionstorage angular-web-storage
Commentami!