Angular2-jwt AuthHttp 请求未调用答案

【问题标题】：Angular2-jwt AuthHttp request not calledAngular2-jwt AuthHttp 请求未调用
【发布时间】：2016-11-08 09:19:49
【问题描述】：

我一直关注 this guide 在 Ionic 2 应用程序中设置 JWT 身份验证。登录端工作正常，但是当我尝试使用 AuthHttp 类时，没有发出任何请求，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}

【问题讨论】：

控制台有错误吗？
不，完全没有我觉得奇怪的错误。我可以console.log(this.authHttp)，它也显示代码，所以它肯定设置好了。
可能与我的问题 (stackoverflow.com/questions/42343576/…) 相同，尽管我设法弄清楚，在我的情况下，这是由于缺少令牌。我已将默认的 'id_token' 名称更改为 'token' 并且 authHttp 服务找不到它（即使我在 authConfig 中明确定义了它）。所以当我把它改回来时，一切都开始工作了。

标签： angular jwt ionic2

【解决方案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 类：

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

【讨论】：

嗨蒂埃里，不幸的是，即使有了它，它仍然在做同样的事情
你也忘了导入 Headers 类 ;-)
HTTP_PROVIDERS 在AuthHttp 之前定义？
是的，我已经用我目前拥有的内容更新了我的问题。

【解决方案2】：

最近对 angular2-jwt 的更新应该适用于最新的 Ionic 2 版本。你能检查这个 repo 并让我知道它是否适合你吗？ :) https://github.com/auth0-samples/auth0-ionic2-samples

编辑：链接已更新

【讨论】：

【解决方案3】：

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

【讨论】：