未调用 Angular2-jwt AuthHttp 请求

Question

我一直在关注 this guide 在 Ionic 2 应用程序中设置 JWT 身份验证。登录方面的工作绝对正常，但是当我尝试使用 AuthHttp class 时，没有发出任何请求，Chrome 的 network 选项卡或服务器上也没有任何显示边.

我的 app.ts 文件中有以下内容：

import 'es6-shim';
import {App, IonicApp, Platform, MenuController} from 'ionic-angular';
import {HTTP_PROVIDERS, Http, Headers} from 'angular2/http';
import {provide} from 'angular2/core';
import {AuthHttp, AuthConfig} from 'angular2-jwt';
import {AuthData} from './providers/auth-data';
import {UserData} from './providers/user-data';


@App({
    templateUrl: 'build/app.html',
    providers: [
        HTTP_PROVIDERS,
        provide(AuthHttp, {
            useFactory: (http) => {
                return new AuthHttp(new AuthConfig(), http);
            },
            deps: [Http]
        }),
        AuthData,
        UserData
    ],
    config: {
        apiURL: 'http://localhost:9000'
    } // http://ionicframework.com/docs/v2/api/config/Config/
})

然后在 user-data.ts 我有这个：

import {Injectable} from 'angular2/core';
import {Http, Headers, RequestOptions} from 'angular2/http';
import {Config, Storage, LocalStorage, Events} from 'ionic-angular';
import {AuthHttp, JwtHelper, tokenNotExpired} from 'angular2-jwt';
import {Observable} from 'rxjs/Observable';
import 'rxjs/Rx';

/**
 * @name UserData
 * @description
 * Provider for any user related data.
 */
@Injectable()
export class UserData {

  apiURL: string;
  contentHeader: Headers = new Headers({'Content-Type': 'application/json'});
  error: string;
  jwtHelper: JwtHelper = new JwtHelper();
  local: Storage = new Storage(LocalStorage);
  storage: any;
  user: any;

  constructor(
    public authHttp: AuthHttp,
    private config: Config,
    private events: Events,
    private http: Http
  ) {
    this.apiURL = config.get('apiURL');
    let token = this.local.get('id_token')._result;
    if (token) {
      this.user = this.jwtHelper.decodeToken(token);
    }
  }

  getUser() {
    return new Promise(resolve => {

      this.authHttp.get(this.apiURL+'/api/users/me', {
        headers: this.contentHeader
      })
      .map(res => res.json())
      .subscribe(
        data => {
          resolve('test');
        },
        err => {
          console.log(err);
        }
      );

    });
  }

}

有人能告诉我我哪里出错了吗？我是否遗漏了什么？我已经多次阅读 angular2-jwt 文档，对我来说一切都很好。

感谢您的帮助。

编辑：

如果我在 getUser() 函数中执行 console.log(this.authHttp)，它会记录以下内容：

AuthHttp {http: Http, _config: Object, tokenStream: Observable}

Answer 1

我认为您忘记在应用程序的 providers 属性中指定 HTTP_PROVIDERS：

import {HTTP_PROVIDERS, Http} from 'angular2/http';
(...)

@App({
  templateUrl: 'build/app.html',
  providers: [
    HTTP_PROVIDERS,
    provide(AuthHttp, {
        useFactory: (http) => {
            return new AuthHttp(new AuthConfig(), http);
        },
        deps: [Http]
    }),
    AuthData,
    UserData
  ],
  config: {
     apiURL: 'http://localhost:9000'
  } // http://ionicframework.com/docs/v2/api/config/Config/
})

编辑

你只需要导入 Headers class:

import {HTTP_PROVIDERS, Http, Headers} from 'angular2/http';

Answer 2

不是完美的解决方案，但我注意到在 Ionic 的 this similar guide 中，他们将 angular2-jwt 版本指定为 0.1.6。降级到这个版本，它工作正常！

Answer 3

最近对 angular2-jwt 的更新应该可以与最新的 Ionic 2 版本一起正常工作。你能检查一下这个回购并让我知道它是否适合你吗？ :) https://github.com/auth0-samples/auth0-ionic2-samples

编辑：Link 已更新

未调用 Angular2-jwt AuthHttp 请求

Angular2-jwt AuthHttp request not called

jwt

ionic2

angular