Comment stocker le jeton dans le stockage local ou de session dans Angular 2?

Question

Je veux utiliser le stockage local ou de session pour enregistrer le jeton d'authentification dans angular 2.0.0. J'utilise angular2-localstorage mais cela ne fonctionne que dans les versions 2.0.0-rc.5 angulaire et quand je l'utilisais dans 2.0.0 à travers moi Tapez erreur. Je veux utiliser le stockage local par défaut de Angular 2.0.0.

Answer 1

Enregistrer dans un stockage local

 localStorage.setItem('currentUser', JSON.stringify({ token: token, name: name }));
 

Charge depuis le stockage local

 var currentUser = JSON.parse(localStorage.getItem('currentUser'));
var token = currentUser.token; // your token
 

Pour plus d’informations, je vous suggère de suivre ce tutoriel: Angular 2 JWT Authentication Example & Tutorial

Answer 2

Que tout dépend de ce que vous avez besoin exactement. Si vous avez juste besoin de stocker et de récupérer un jeton afin de l'utiliser dans vos requêtes http, je vous suggère tout simplement de créer un service et de l'utiliser dans l'ensemble de votre projet.

exemple d'intégration de base:

import {Injectable} from 'angular@core'

@Injectable()
export class TokenManager {

    private tokenKey:string = 'app_token';

    private store(content:Object) {
        localStorage.setItem(this.tokenKey, JSON.stringify(content));
    }

    private retrieve() {
        let storedToken:string = localStorage.getItem(this.tokenKey);
        if(!storedToken) throw 'no token found';
        return storedToken;
    }

    public generateNewToken() {
        let token:string = '...';//custom token generation;
        let currentTime:number = (new Date()).getTime() + ttl;
        this.store({ttl: currentTime, token});
    }

    public retrieveToken() {

        let currentTime:number = (new Date()).getTime(), token = null;
        try {
            let storedToken = JSON.parse(this.retrieve());
            if(storedToken.ttl < currentTime) throw 'invalid token found';
            token = storedToken.token;
        }
        catch(err) {
            console.error(err);
        }
        return token;

    }

}

Toutefois, si vous devez utiliser le stockage local plus souvent, en utilisant les valeurs stockées dans les vues de l'application par exemple. Vous pouvez utiliser l'une des bibliothèques qui fournit un wrapper de la webstorages comme vous l'avez fait avec angular2-localstorage.

J'ai créé il y a quelques mois ng2-webstorage qui doit répondre à vos besoins. Il fournit deux ng2 de services et deux décorateurs de synchroniser le webstorage valeurs et du service/attributs de composant.

import {Component} from '@angular/core';
import {LocalStorageService, LocalStorage} from 'ng2-webstorage';

@Component({
    selector: 'foo',
    template: `
        <section>{{boundValue}}</section>
        <section><input type="text" [(ngModel)]="attribute"/></section>
        <section><button (click)="saveValue()">Save</button></section>
    `,
})
export class FooComponent {

    @LocalStorage()
    boundValue; // attribute bound to the localStorage
    value;

    constructor(private storage:LocalStorageService) {
        this.localSt.observe('boundValue')// triggers the callback each time a new value is set
            .subscribe((newValue) => console.log('new value', newValue));
    }

    saveValue() {
      this.storage.store('boundValue', this.value); // store the given value
    }

}

Answer 3

nous pouvons magasin de stockage de session comme ça

magasin de jeton doit être comme

 localStorage.setItem('user', JSON.stringify({ token: token, username: username }));

Magasin de Session à sessionStorage

Vous pouvez stocker des chaînes de caractères et tableaux dans le stockage de session

Chaîne De Ex.

    let key = 'title'; 
    let value = 'session';
    sessionStorage.setItem(key, value);

Tableau Ex.

    let key = 'user'; 
    let value = [{'name':'shail','email':'example@gmail.com'}];

    value = JSON.stringify(value);

    sessionStorage.setItem(key, value);

Stockés session de sessionStorage par clé

const session = sessionStorage.getItem('key');

Supprimer la session de sessionStorage par clé

sessionStorage.removeItem('key');

Supprimer toutes les sessions enregistrées à partir de sessionStorage

sessionStorage.clear();

2. magasin Local de stockage doit être comme

Stocker les éléments dans localStorage

Vous pouvez stocker des chaînes de caractères et tableaux dans l'emplacement de stockage

Chaîne De Ex.

 let key = 'title'; 
 let value = 'session';
 localStorage.setItem(key, value);

Tableau Ex.

let key = 'user'; 
let value = [{'name':'shail','email':'example@gmail.com'}];

value = JSON.stringify(value);

localStorage.setItem(key, value);

Obtenir les articles qui sont stockés à partir de localStorage par clé

const item = localStorage.getItem('key');

Supprimer la session de localStorage par clé

localStorage.removeItem('key');

Supprimer tous les éléments enregistrés de localStorage

localStorage.clear();

Answer 4

Voici la meilleure pratique: https://github.com/PillowPillow/ng2-webstorage

Je l'utilisais dans AngularJs, maintenant avec Angular2. Très utile.

Answer 5

Ajoutant à la réponse de Bojan Kogoj:

Dans votre app.module.ts, ajoutez un nouveau fournisseur pour le stockage.

 @NgModule({
   providers: [
      { provide: Storage, useValue: localStorage }
   ],
   imports:[],
   declarations:[]
})
 

Et vous pouvez ensuite utiliser DI pour l'obtenir où vous en avez besoin.

  @Injectable({
    providedIn:'root'
 })
 export class StateService {
    constructor(private storage: Storage) { }
 }