Auth0 JWT插件和ionic2 - 沒有授權標頭髮送

Question

我有問題，從Auth0集成JWT令牌插件與最少Ionic2。我絕對沒有錯誤，但請求是發送未經授權的頭。我的代碼：

app.module

import { NgModule } from '@angular/core'; 
import { IonicApp, IonicModule } from 'ionic-angular'; 
import { MyApp } from './app.component'; 
import { AboutPage } from '../pages/about/about'; 
import { ContactPage } from '../pages/contact/contact'; 
import { HomePage } from '../pages/home/home'; 
import { TabsPage } from '../pages/tabs/tabs'; 
import { LoginPage } from '../pages/login/login'; 
import { AuthHttp, AuthConfig } from 'angular2-jwt'; 
import { Storage } from '@ionic/storage'; 
import { Http } from '@angular/http'; 

import { AuthService } from '../services/auth.service'; 
import { NoteService } from '../services/note.service'; 

let storage: Storage = new Storage(); 

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

@NgModule({ 
    declarations: [ 
    MyApp, 
    AboutPage, 
    ContactPage, 
    HomePage, 
    TabsPage, 
    LoginPage 
    ], 
    imports: [ 
    IonicModule.forRoot(MyApp) 
    ], 
    bootstrap: [IonicApp], 
    entryComponents: [ 
    MyApp, 
    AboutPage, 
    ContactPage, 
    HomePage, 
    TabsPage, 
    LoginPage 
    ], 
    providers: [ 
    AuthService, 
    AuthHttp, 
    { 
     provide: AuthHttp, 
     useFactory: getAuthHttp, 
     deps: [Http] 
    }, 
    Storage, 
    NoteService, 
    ] 
}) 
export class AppModule {} 

我的服務：

import { Injectable } from '@angular/core'; 
import { Headers, Http } from '@angular/http'; 
import { AuthHttp } from 'angular2-jwt'; 
import { AppParameters } from '../parameters'; 
import { AuthFormModel } from '../models/authForm.model'; 

import 'rxjs/add/operator/toPromise'; 

@Injectable() 
export class NoteService { 
    private headers = new Headers({ 'Content-Type': 'application/json' }); 
    private note_url: string = AppParameters.ENDPOINT_URL + '/notes/'; 

    private notes: any; 
    constructor(private authHttp: AuthHttp) {} 

    getUserNotes(){ 
     return this.authHttp.get(this.note_url); 
    } 

} 

和組件，我使用的服務：

import { Component } from '@angular/core'; 
import { NoteService } from '../../services/note.service'; 

import { NavController } from 'ionic-angular'; 



@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.html' 
}) 
export class HomePage { 

    notes: any; 

    constructor(
    public navCtrl: NavController, 
    public noteService: NoteService 
    ) {} 

    ngOnInit(){ 
    this.noteService.getUserNotes().subscribe(
      data => this.notes = data, 
      err => console.log(err), 
      () => { 
       console.log('request complete'); 
       console.log(this.notes); 
      } 
     ); 
    } 

} 

的package.json

{ 
    "name": "ionic-hello-world", 
    "author": "Ionic Framework", 
    "homepage": "http://ionicframework.com/", 
    "private": true, 
    "scripts": { 
    "ionic:build": "ionic-app-scripts build", 
    "ionic:serve": "ionic-app-scripts serve" 
    }, 
    "dependencies": { 
    "@angular/common": "2.1.1", 
    "@angular/compiler": "2.1.1", 
    "@angular/compiler-cli": "2.1.1", 
    "@angular/core": "2.1.1", 
    "@angular/forms": "2.1.1", 
    "@angular/http": "2.1.1", 
    "@angular/platform-browser": "2.1.1", 
    "@angular/platform-browser-dynamic": "2.1.1", 
    "@angular/platform-server": "2.1.1", 
    "@ionic/storage": "1.1.6", 
    "angular2-jwt": "^0.1.25", 
    "ionic-angular": "2.0.0-rc.3", 
    "ionic-native": "2.2.3", 
    "ionicons": "3.0.0", 
    "rxjs": "5.0.0-beta.12", 
    "zone.js": "0.6.26" 
    }, 
    "devDependencies": { 
    "@ionic/app-scripts": "0.0.45", 
    "typescript": "2.0.6" 
    }, 
    "cordovaPlugins": [ 
    "cordova-plugin-whitelist", 
    "cordova-plugin-console", 
    "cordova-plugin-statusbar", 
    "cordova-plugin-device", 
    "cordova-plugin-splashscreen", 
    "ionic-plugin-keyboard" 
    ], 
    "cordovaPlatforms": [], 
    "description": "noteman_js: An Ionic project" 
} 

一切正常，絕對沒有在控制檯中的錯誤，但頭仍然缺失。也許我忘記了什麼？我嘗試了JWT插件的配置以及堆棧溢出中的很多配置。 Btw。對不起，我可怕的英語:)

Answer 1

你錯過了一件事。在您的服務中，您需要將您的獲取請求中的標題作爲選項發送。

對於authHttp要求

從閱讀我相信文檔以下將工作

github: authO/angular2-jwt

在服務： NoteService類應該是這個樣子：

export class NoteService { 
    private headers = new Headers({ 'Content-Type': 'application/json' }); 
    private note_url: string = AppParameters.ENDPOINT_URL + '/notes/'; 

    private notes: any; 
    constructor(private authHttp: AuthHttp) {} 

    getUserNotes(){ 
     return this.authHttp.get(this.note_url, {headers: this.headers}); 
    } 
} 

對於默認的角度Http請求

在服務： 您需要導入請求選項

import { Http, Headers, RequestOptions } from '@angular/http'; 

和你NoteService類應該是這個樣子：

export class NoteService { 
    private headers = new Headers({ 'Content-Type': 'application/json' }); 
    private options = new RequestOptions({ headers: this.headers }); 
    private note_url: string = AppParameters.ENDPOINT_URL + '/notes/'; 

    private notes: any; 
    constructor(private http: Http) {} 

    getUserNotes(){ 
     return this.http.get(this.note_url, this.options); 
    } 
} 

Answer 2

只需使用窗口。本地存儲代替離子存儲：

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並沒有使用Ionic存儲來存儲id_token，它只是使用window.localStorage，所以你也可以直接使用它，並且它的同步方法可以避免這種情況承諾的東西。