Loading ...

Persistenza dei dati in Angular con angular-web-storage

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!