Question

我在使用最少Ionic2的Auth0集成JWT令牌插件时遇到问题。我绝对没有错误，但请求是在没有授权标题的情况下发送的。我的代码：

app.module

class CustomerService {
   function __construct($entityMapper) {
        $this->entityMapper = $entityMapper;
   }

   public function update($customer) {
        $customerToUpdate = $this->repository.getById($customer->id);
        $this->entityMapper->mapCustomerToCustomer($customer, $customerToUpdate);

        $this->repository.addOrUpdate($customerToUpdate); 
   }
}

我的服务：

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

}

的package.json

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

}

一切正常，绝对没有错误在控制台但标题仍然缺失。也许我忘了什么？我尝试从JWT插件配置和堆栈溢出的许多配置。顺便说一句。对不起我可怕的英语：）

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

只需使用window.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并没有使用Ionic存储来存储id_token ...它只是使用了window.localStorage，所以你也可以只使用它而且它是同步的方法，以避免这种承诺的东西。

Auth0 JWT插件和ionic2 - 没有授权标头发送

2 个答案: