Comment conserver token en local ou stockage de Session en Angular 2?

Enregistrer le local de stockage

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

Charger à partir d'un local de stockage

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

Cela dépend totalement de ce dont 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;

    }

}

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

j'ai créé il y a quelques mois ng2-webstorage qui doit répondre à vos besoins. Il fournit deux services ng2 et deux décorateurs pour synchroniser les valeurs du webstorage et les attributs du service/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
    }

}

nous pouvons le magasin de stockage de session comme ça

enregistrer le jeton doit être de la forme

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

Magasin de Session à sessionStorage

vous pouvez stocker la chaîne et le tableau dans le stockage de session

Chaîne De Ex.

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

Array Ex.

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

    value = JSON.stringify(value);

    sessionStorage.setItem(key, value);

obtenir la session stockée de sessionStorage par clé

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

Supprimer la session de sessionStorage par la touche

sessionStorage.removeItem('key');

Supprimer toutes les sessions enregistrées à partir de sessionStorage

sessionStorage.clear();

2. stocker le stockage Local devrait être comme

stocker les articles dans un entrepôt local

vous pouvez stocker à la fois la chaîne et le tableau dans le stockage d'emplacement

Chaîne Ex.

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

Array 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 la touche

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

Supprimer la session de localStorage par la touche

localStorage.removeItem('key');

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

localStorage.clear();

c'est Ici la meilleure pratique: https://github.com/PillowPillow/ng2-webstorage

Je l'utilisais à AngularJs, maintenant avec Angular2. Tres utile.

Dans votre application.module.ts, ajouter un nouveau fournisseur pour le stockage.

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

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

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

import { Injectable,OpaqueToken } from '@angular/core'; export const localStorage = new OpaqueToken('localStorage');

Placer ces lignes en haut du fichier, il devrait résoudre le problème.

var arr=[{"username":"sai","email":"sai@example.com,"}]
localStorage.setItem('logInArr', JSON.stringfy(arr))

en règle générale, le jeton ne doivent pas être stockées sur le localStorage ni sessionStorage. Les deux endroits sont accessibles depuis JS et JS ne devrait pas se soucier du token d'authentification.

IMHO le token doit être stocké sur un cookie avec le HttpOnly et Secure drapeau tel que suggéré ici: https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage

exemple Simple:

var userID = data.id;

localStorage.setItem('userID',JSON.stringify(userID));