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

session angular 5

Question

Quiero usar el almacenamiento local o de sesión para guardar el token de autenticación en angular 2.0.0. Uso angular2-localstorage pero solo funciona angular 2.0.0-rc.5 y cuando lo usé en 2.0.0 a través de mí Error de tipo . Quiero usar el almacenamiento local predeterminado de Angular 2.0.0.

Answer 1

podemos almacenar almacenamiento de sesión así

token de tienda debe ser como

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

Almacenar sesión en sesión

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

Cadena Ej.

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

Array Ex.

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

Obtener sesión almacenada de sessionStorage por clave

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

Eliminar sesión guardada de sessionStorage por clave

sessionStorage.removeItem(''key'');

Eliminar todas las sesiones guardadas de sessionStorage

sessionStorage.clear();

2. almacenamiento local debe ser como

Almacenar artículos en localStorage

Puede almacenar cadenas y matrices en el almacenamiento de ubicación

Cadena Ej.

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

Array Ex.

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

Obtenga elementos almacenados de localStorage por clave

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

Eliminar sesión guardada de localStorage por clave

localStorage.removeItem(''key'');

Eliminar todos los elementos guardados de localStorage

localStorage.clear();

Answer 2

Agregando 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) { }
}

Answer 3

Aquí está la mejor práctica: ng2-webstorage

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

Answer 4

Como regla general, el token no debe almacenarse en localStorage ni en sessionStorage . JS puede acceder a ambos lugares y JS no debería preocuparse por el token de autenticación.

En mi humilde opinión, el token debe almacenarse en una cookie con el HttpOnly and Secure como se sugiere aquí: stormpath.com/blog/…

Answer 5

Ejemplo simple:

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

Answer 6

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 utilizar el almacenamiento local con más frecuencia, por ejemplo, utilizando los valores almacenados en las vistas de su aplicación. Puede usar una de las bibliotecas que proporciona un contenedor de los almacenes web como lo hizo con angular2-localstorage.

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

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 7

Guardar en almacenamiento local

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

Carga desde 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

Answer 8

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.

Answer 9

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