web-dev-qa-db-ja.com

Angular 2にローカルまたはセッションストレージにトークンを格納する方法

ローカルまたはセッションストレージを使用して認証トークンを保存したいangular 2.0.0.私はangular2-localstorageを使用しますが、動作はAngular 2.0.0-rc.5そして、私が2.0.0でそれを使ったとき、それは私を通してType errorです。 Angular 2.0.0のデフォルトのローカルストレージを使用したいです。

angularlocal-storage
50
Rahul dev

ローカルストレージに保存

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 Authentication Example＆Tutorial

88
Bojan Kogoj

それはあなたが何を必要としているのかに完全に依存します。 httpリクエストでトークンを使用するためにトークンを保存して取得するだけの場合は、単にサービスを作成してプロジェクト全体で使用することをお勧めします。

基本的な統合の例：

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;

    }

}

ただし、ローカルストレージをもっと頻繁に使用する必要がある場合は、たとえばアプリビューに保存されている値を使用します。 angular2-localstorageで行ったように、webstorageのラッパーを提供するライブラリの1つを使用することができます。

私は数ヶ月前に作成しました ng2-webstorage それはあなたのニーズに応えるべきです。 Webstorageの値とサービス/コンポーネントの属性を同期させるために、2つのng2サービスと2つのデコレータを提供します。

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

そのようなセッションストレージを保存できます

ストアトークンは次のようになります

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

sessionStorageにセッションを保存

文字列と配列の両方をセッションストレージに保存できます

文字列例

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

配列例

    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();
  1. ローカルストレージは次のようになります。

LocalStorageにアイテムを保管する

文字列と配列の両方をロケーションストレージに保存できます

文字列例

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

配列例

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();
20
Shailesh Ladumor

原則として、トークンはlocalStorageにもsessionStorageにも格納しないでください。どちらの場所もJSからアクセス可能であり、JSは認証トークンを気にするべきではありません。

私見ここで示唆されているように、トークンはHttpOnlyとSecureフラグでクッキーに保存されるべきです： vs-html5-web-storage

2
ilopezluna

これがベストプラクティスです。 https://github.com/PillowPillow/ng2-webstorage

私は今Angular2で、AngularJsでそれを使っていました。とても便利。

0
Anton Pegov

簡単な例：

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

これらの行をファイルの先頭に置くと、問題が解決します。

0
Deependra Kushwah

Bojan Kogojの答えを追加します。

App.module.tsに、ストレージ用の新しいプロバイダを追加します。

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

そして、必要なときはいつでもDIを使用して取得できます。

 @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