Angular 在第一个http get请求上获取未定义的变量

我想在每个请求中传递查询字符串api_toke={{tokenStored}}。下面的代码是我用来实现它的。问题是，当页面最初被调用时，令牌是未定义的，但在调用之后，它将按预期工作。我如何解决这个问题

这是控制台中抛出的错误

polyfills.js:3 GET http://myapp.dev/app/public/api/project?api_token=undefined 401 (Unauthorized)

list-projects.ts:39 Response {_body: "{"error":"Unauthenticated."}", status: 401, ok: false, statusText: "Unauthorized", headers: Headers…} "Error Caught

组成部分

export class ListProjectsPage {

   ionViewDidLoad() {
      this.http.get(this.config.url.api+this.config.endpoint.listprojects)
        .subscribe(
      data => {
        this.projects = data.json();
      },
      error => {
        console.log(error,"Error");
      });
  }

}

我的自定义HTTP提供程序

import { Injectable } from '@angular/core';
import { Http, RequestOptions, URLSearchParams } from '@angular/http';
import * as AppConfig from '../../app/app.config';
import {Storage} from '@ionic/storage';

@Injectable()
export class HttpProvider {

  config: any;
  token: any;
  constructor(public http: Http,public storage: Storage) {
    this.config = AppConfig.config;
    this.storage.get('token').then(token => {
      this.token = token;
    }).catch(e => {
      this.token = null;
    });
  }

  get(url:string){
    return this.http.get(url+'?api_token='+this.token);
  }

}

---

我能给你的建议是：

1-确保令牌在本地存储中，并且密钥是

“令牌”

：-）

2-可能使用Angular2/4和Ionic 2/3应用程序的插件来等效Angularjs和Ionic 1 http拦截器。。我可以向您推荐这个（我使用这个）：

angular2http拦截器

（

https://www.npmjs.com/package/angular2-http-interceptor

）

然后你可以这样做：

 HttpInterceptorModule.withInterceptors([{
            deps: [],
            provide: HttpInterceptor,
            useClass: AuthInterceptor,
            multi: true
        }])

a） 从后端为您的令牌响应创建一个模型，如：

export class Auth {
    public access_token: string;
    public userName: string;

}

b） 创建一个服务（不带@inject（）装饰），如：

c） 您的app.module中的应用程序如下所示：

 HttpInterceptorModule.withInterceptors([{
            deps: [],
            provide: HttpInterceptor,
            useClass: AuthInterceptor,
            multi: true
        }])

现在，每次执行http请求时，它都会自动检查您是否拥有令牌，并将其注入请求的头中。。希望它能帮助你

---

注意：如果在传递令牌时需要更改方式（可能在querystring中，而不是在请求的标头中）您可以更改B）点，它将反映到您的所有请求中

它是

未定义的

，因为

get

方法在

storage

可以解析承诺并为`令牌'赋值之前被调用

import { Injectable } from '@angular/core';
import { Http, RequestOptions, URLSearchParams } from '@angular/http';
import * as AppConfig from '../../app/app.config';
import {Storage} from '@ionic/storage';

@Injectable()
export class HttpProvider {

  config: any;
  token: any;
  constructor(public http: Http,public storage: Storage) {
    this.config = AppConfig.config; 
  }

  get(url:string){
    this.storage.get('token').then(token => {
       return this.http.get(url+'?api_token='+this.token);
    })
  }
}

---

虽然这也会起作用，但最好在应用程序启动时将令牌存储在provider中（

config

，在您的情况下），并在进行

http

调用时使用已定义的令牌。

一个简单的if-else块不能解决问题吗？在get like

if（this.token）do this else中，返回observable false

不理解。请explain@JSnow，你试过我的解决方案吗？是的，不起作用。get事件没有被触发。您解决了吗？如果不是的话，我已经更新了我的答案，虽然前一次更好。嘿，费德里科，我已经检查了钥匙。令牌密钥是正确的。它在除第一个请求之外的所有其他请求上都按预期工作。mmm在使用它之前可能会尝试执行JSON.PARSE，例如…this.storage.get（'token'）。然后（token=>{this.token=JSON.PARSE（token）；}）.catch（e=>{this.token=null；}）；您确定必须在QUERYSTRING中传递，而不是在标头中传递吗？