Question

我一直关注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文档，一切看起来都不错。

感谢您的帮助。

编辑：

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

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

Answer 1

我认为您忘记在应用的HTTP_PROVIDERS属性中指定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';

Answer 2

对angular2-jwt的最新更新应该可以与最新的Ionic 2版本一起使用。您能查看这个回购并告诉我它是否适合您？ :) https://github.com/auth0-samples/auth0-ionic2-samples

修改：链接已更新

Answer 3

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

Angular2-jwt AuthHttp请求未调用

3 个答案: