¿Cómo almacenar el token en almacenamiento local o de sesión en Angular 2?

Deseo utilizar el almacenamiento local o de sesión para guardar el token de autenticación en angular 2.0.0. Yo uso angular2-localstorage pero funciona solo angular 2.0.0-rc.5 y cuando lo usé en 2.0.0 lo atravé yo Tipo de error. Quiero usar el almacenamiento local predeterminado de Angular 2.0.0.

Guardar en almacenamiento local

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

Cargar desde el almacenamiento local

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

Para obtener más información, le sugiero que siga este tutorial: Angular 2 JWT Authentication Example & Tutorial

Eso depende totalmente de lo que necesitas exactamente. Si solo necesita almacenar y recuperar un token para usarlo en sus solicitudes http, le sugiero que simplemente cree un servicio y lo use en todo su proyecto.

ejemplo de integración básica:

 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; } } 

Sin embargo, si necesita usar el almacenamiento local más a menudo, al usar los valores almacenados en las vistas de su aplicación, por ejemplo. Puede usar una de las bibliotecas que proporciona un contenedor de webstore como lo hizo con angular2-localstorage.

Creé hace unos meses ng2-webstorage que debería responder a tus necesidades. Proporciona dos servicios ng2 y dos decoradores para sincronizar los valores del almacén web y los atributos del servicio / componente.

 import {Component} from '@angular/core'; import {LocalStorageService, LocalStorage} from 'ng2-webstorage'; @Component({ selector: 'foo', template: ` 
{{boundValue}}
`, }) 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 } }

podemos almacenar almacenamiento de sesión como ese

token de la tienda debe ser como

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

Almacenar sesión en sessionStorage

Puede almacenar cadena y matriz en el almacenamiento de la sesión

String Ex.

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

Array Ej.

  let key = 'user'; let value = [{'name':'shail','email':'example@gmail.com'}]; value = JSON.stringify(value); sessionStorage.setItem(key, value); 

Obtener sesión almacenada de sessionStorage por clave

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

Eliminar la sesión guardada de sessionStorage por clave

 sessionStorage.removeItem('key'); 

Eliminar todas las sesiones guardadas de sessionStorage

 sessionStorage.clear(); 
  1. store El almacenamiento local debería ser como

Almacene artículos en localStorage

Puede almacenar cadena y matriz en almacenamiento de ubicación

String Ex.

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

Array Ej.

 let key = 'user'; let value = [{'name':'shail','email':'example@gmail.com'}]; value = JSON.stringify(value); localStorage.setItem(key, value); 

Obtenga elementos almacenados de localStorage por clave

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

Eliminar la sesión guardada de localStorage por clave

localStorage.removeItem('key');

Eliminar todos los elementos guardados de localStorage

 localStorage.clear(); 

Aquí está la mejor práctica: https://github.com/PillowPillow/ng2-webstorage

Lo usé en AngularJs, ahora con Angular2. Wery útil.

Añadiendo a la respuesta de Bojan Kogoj:

En su app.module.ts, agregue un nuevo proveedor para el almacenamiento.

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

Y luego puede usar DI para obtenerlo donde lo necesite.

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

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

Coloque estas líneas en la parte superior del archivo, debería resolver el problema.

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

Como regla general, el token no se debe almacenar en localStorage ni en sessionStorage . Ambos lugares son accesibles desde JS y al JS no debería importarle el token de autenticación.

En mi humilde opinión, el token debe almacenarse en una cookie con la bandera HttpOnly and Secure como se sugiere aquí: https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage

Ejemplo simple:

 var userID = data.id; localStorage.setItem('userID',JSON.stringify(userID)); 
    Intereting Posts