web-dev-qa-db-fra.com

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

Je veux utiliser le stockage local ou de session pour enregistrer le jeton d'authentification dansangular 2.0.0.J'utiliseangular2-localstoragemais cela ne fonctionne que angular 2.0.0-rc.5 et quand je l'ai utilisé dans 2.0.0 à travers moi Type error. Je veux utiliser le stockage local par défaut de Angular 2.0.0.

angularlocal-storage
47
Rahul dev

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, je vous suggère de suivre ce tutoriel: Angular 2 Exemple d’authentification JWT & Tutorial

87
Bojan Kogoj

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 pour pouvoir l’utiliser dans vos requêtes http, je vous suggère simplement de créer un service et de l’utiliser dans votre ensemble. 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, utilisez les valeurs stockées dans les vues de vos applications, par exemple. Vous pouvez utiliser l’une des bibliothèques fournissant un wrapper des magasins Web, comme vous l’avez fait avec angular2-localstorage.

J'ai créé il y a quelques mois ng2-webstorage qui devrait 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
    }

}
33
Polochon

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

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

0
Anton Pegov

Exemple simple:

var userID = data.id;

localStorage.setItem('userID',JSON.stringify(userID));
0
Navin Kumar

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

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

0
Deependra Kushwah

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) { }
 }
0
dwbartz
var arr=[{"username":"sai","email":"[email protected],"}]
localStorage.setItem('logInArr', JSON.stringfy(arr))
0
swathi

En règle générale, le jeton ne doit pas être stocké dans localStorage ni dans sessionStorage. Les deux emplacements sont accessibles à partir de JS et ce dernier ne doit pas se soucier du jeton d'authentification. 

IMHO Le jeton doit être enregistré dans un cookie avec les indicateurs HttpOnly et Secure comme suggéré ici: https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage

0
ilopezluna