Ionic 2應用程序無法從存儲中獲得JWT令牌

我正在使用帶有angular2-jwt插件的Ionic 2最終版本。我成功登錄並接收的令牌，我保存到存儲Ionic 2應用程序無法從存儲中獲得JWT令牌

this.storage.set('id_token', res.token);

一旦我刷新頁面，我嘗試檢查授權在我auth.ts頭從不將令牌。我知道問題出在異步存儲上，但我不知道如何解決它。我嘗試了許多不同的解決方案...

另外，當我在我的常量中保存令牌時，它的工作原理非常好。

我app.module.ts看起來是這樣的：

... 

export function getAuthHttp(http) { 
    return new AuthHttp(new AuthConfig({ 
    noJwtError: true, 
    globalHeaders: [{'Content-Type': 'application/json', 'x-academy': 'academy'}], 
    tokenGetter:() => storage.get('id_token'), 
    }), http); 
} 

... 

providers: [ 
    {provide: ErrorHandler, useClass: IonicErrorHandler}, 
    {provide: AuthHttp, useFactory: getAuthHttp, deps: [Http]} 
... 
]

而且我auth.ts：

... 
@Injectable() 
export class Auth { 

    serverUrl: string; 
    storage: Storage = new Storage(); 

    constructor(public http: Http, 
      public authHttp: AuthHttp, 
      public constantsService: ConstantsService, 
    ) {     
     this.serverUrl = this.constantsService.API_ENDPOINT(); 

    } 

    login(credentials){ 
     let headers = new Headers({'Content-Type': 'application/json', 'x-academy': 'academy' }); 
     return this.authHttp.post(this.serverUrl+'/login', JSON.stringify(credentials), {headers: headers}) 
    } 
    .... 
    public checkAuthentication(){ 
     return this.authHttp.post(this.serverUrl+'/restricted',{}) 
    } 
    ....

謝謝。

來源

2017-02-10 ACES

對於那些可能正在查看這段代碼的人來說，這很好。我忘了讓我記住我是真的......是的，我知道...... – ACES

更改您getAuthHttp喜歡使用localStorage的，而不是離子存儲：

export function getAuthHttp(http) { 
    return new AuthHttp(new AuthConfig({ 
    globalHeaders: [{'Accept': 'application/json'}], 
    //tokenGetter: (() => storage.get('id_token').then((val)=>{return val})), 
    tokenGetter: (() => JSON.parse(window.localStorage.getItem("id_token"))), 
    noJwtError: true, 
    headerPrefix: "JWT", 
    }), http); 
}

據我所知道的，auth0 SDK是不使用離子存儲來存儲反正id_token ......它只是使用window.localStorage，所以你也可以使用它，它的同步方法可以避免這個承諾。

來源

2017-06-03 15:33:47

Ionic 2應用程序無法從存儲中獲得JWT令牌

回答

相關問題