Как хранить токен в локальном или сеансовом хранилище в Angular 2?

Ответ 1

Сохранить в локальном хранилище

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

Загрузка из локального хранилища

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

Подробнее я предлагаю вам пройти этот урок: Angular 2 Пример JWT-аутентификации и учебник

Ответ 2

Это полностью зависит от того, что вам нужно. Если вам просто нужно сохранить и получить токен, чтобы использовать его в ваших HTTP-запросах, я предлагаю вам просто создать сервис и использовать его во всем проекте.

пример базовой интеграции:

import {Injectable} from '[email protected]'

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

    }

}

Однако, если вам нужно чаще использовать локальное хранилище, например, используя хранимые значения в представлениях приложений. Вы можете использовать одну из библиотек, которая предоставляет оболочку веб-сайтов, например, с angular2 -localstorage.

Я создал несколько месяцев назад ng2-webstorage, который должен отвечать вашим потребностям. Он предоставляет две службы ng2 и два декоратора для синхронизации значений webstorage и атрибутов службы/компонента.

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
    }

}

Ответ 3

мы можем хранить хранилище сеансов, подобное

Сохранить сеанс в sessionStorage

Вы можете хранить как строку, так и массив в хранилище сеансов

Строковый пример

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

Получить сохраненный сеанс из sessionStorage по ключу

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

Удалить сохраненную сессию из sessionStorage с помощью ключа

sessionStorage.removeItem('key');

Удалить все сохраненные сеансы из sessionStorage

sessionStorage.clear();

2. хранилище Локальное хранилище должно быть как

Сохранение элементов в localStorage

Вы можете хранить как строку, так и массив в хранилище местоположений

Строковый пример

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

Получить сохраненные элементы из localStorage с помощью ключа

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

Удалить сохраненную сессию из localStorage по ключу

localStorage.removeItem('key');

Удалить все сохраненные элементы из localStorage

localStorage.clear();

Ответ 4

Вот лучшая практика: https://github.com/PillowPillow/ng2-webstorage

Я использовал его в AngularJs, теперь с Angular2. Wery полезно.