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: [ ... ]
})

希望这有帮助！：）

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

1 个答案: