如何在Angular 2的本地或会话存储中存储令牌?

我想使用本地或会话存储在angular2-localstorage中保存身份验证令牌,但我使用的是angular2-localstorage,但它仅在角度2.0.0-rc.5下有效,而在2.0.0-rc.5中通过我输入时出现类型错误。 我想使用Angular 2.0.0的默认本地存储。

Rahul dev asked 2020-01-12T19:19:54Z
9个解决方案
89 votes

保存到本地存储

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身份验证示例和教程

Bojan Kogoj answered 2020-01-12T19:20:11Z
33 votes

这完全取决于您到底需要什么。如果您只需要存储和检索令牌以在您的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一样使用提供webstorages包装的库之一。

我几个月前创建了ng2-webstorage,它应该可以满足您的需求。它提供了两个ng2服务和两个装饰器,以同步Web存储的值和服务/组件的属性。

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
    }

}
Polochon answered 2020-01-12T19:20:45Z
21 votes

我们可以像这样存储会话存储

商店令牌应该像

 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':'example@gmail.com'}];

    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':'example@gmail.com'}];

value = JSON.stringify(value);

localStorage.setItem(key, value);

通过密钥从localStorage获取存储的项目

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

通过密钥从localStorage删除已保存的会话

localStorage.removeItem('key');

从localStorage删除所有保存的项目

localStorage.clear();
Shailesh Ladumor answered 2020-01-12T19:22:18Z
5 votes

通常,不应将令牌存储在HttpOnlySecure上。JS都可以访问这两个位置,并且JS不必关心身份验证令牌。

恕我直言,令牌应使用HttpOnlySecure标志存储在cookie中,如此处建议的那样:[https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage]

ilopezluna answered 2020-01-12T19:22:43Z
0 votes

这是最佳做法:[https://github.com/PillowPillow/ng2-webstorage]

我现在在Angular2中用在AngularJs中。 很有用。

Anton Pegov answered 2020-01-12T19:23:07Z
0 votes

加上Bojan Kogoj的答案:

在您的app.module.ts中,添加新的存储提供程序。

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

然后,您可以使用DI随时随地获取它。

 @Injectable({
    providedIn:'root'
 })
 export class StateService {
    constructor(private storage: Storage) { }
 }
dwbartz answered 2020-01-12T19:23:36Z
0 votes

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

将这些行放在文件的顶部,它将解决此问题。

Deependra Kushwah answered 2020-01-12T19:24:00Z
0 votes
var arr=[{"username":"sai","email":"sai@example.com,"}]
localStorage.setItem('logInArr', JSON.stringfy(arr))
swathi answered 2020-01-12T19:24:16Z
0 votes

简单的例子:

var userID = data.id;

localStorage.setItem('userID',JSON.stringify(userID));
Navin Kumar answered 2020-01-12T19:24:35Z
translate from https://stackoverflow.com:/questions/39840457/how-to-store-token-in-local-or-session-storage-in-angular-2