在 Ionic 2 的 HTTP 请求中使用本地存储中的令牌

Question

我的 Ionic 2 应用程序有一个登录名，它将身份验证令牌存储到本地存储中。然后我想在我的 HTTP 请求中使用此令牌。

在我的身份验证服务中，我有以下方法：

authToken() {
      return this.storage.get('auth_token').then((val) => {
         return val;
      });
    }

然后在我的服务中发出 HTTP 请求：

export class Rides {
    token: string;
    constructor(public http: Http, public authentification: Authentification) {
        this.authentification.authToken().then((val) => {
            this.token = val;
            console.log(this.token);
        });
    }
    getOpenRides() {
        var headers = new Headers();
        headers.append('Authorization', 'Token token=' + this.token);
        return this.http.get('URL', { headers: headers })
        .map(res => res.json());
    }
}

它会在我的 Rides 服务构造函数中记录正确的令牌。但是当我在HTTP请求中使用令牌时，我的服务器说发送了token=undefined。

我有什么不同之处？

这是我调用getOpenRides的页面组件，也是我想要显示结果的地方：

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { Rides } from '../../providers/rides';
/*
  Generated class for the Agenda page.
  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-agenda',
  templateUrl: 'agenda.html',
  providers: [Rides]
})
export class AgendaPage {
    openRides: any;
  constructor(public navCtrl: NavController, public navParams: NavParams, public rides: Rides) {}
  ionViewDidLoad() {
    this.openRides = this.rides.getOpenRides()
    .subscribe(response => { console.log(response.rides) });
  }

}

Answer 1

问题应该在于您在组件中标记提供程序，这意味着，当每个组件实例化时，它们正在使用服务的新干净实例，其中令牌未定义。

如果将提供程序放在NgModule而不是组件中，则意味着该服务对于该模块中的所有组件都是相同的。因此，当您的 AgendaPage 组件实例化时，它将具有与设置令牌的服务相同的服务。

因此，请从(所有(组件中删除提供程序：

@Component({
  selector: 'page-agenda',
  templateUrl: 'agenda.html',
  // providers: [Rides] // remove!
})

并在您的NgModule中声明：

@NgModule({
  imports: [...],
  declarations: [...],
  providers: [ Rides, .... ], // add this!
  bootstrap: [ ... ]
})

希望这有帮助！ :)