从存储Ionic(异步数据)中获取令牌

Question

如何访问存储在手机存储中的令牌，因为这是异步获得的。变量总是未定义的。

这就是我想要获取数据的.ts。

cars.ts:

import { Component } from '@angular/core';
import { NavController, MenuController } from 'ionic-angular';
import { ServiceRestProvider } from '../../providers/service-rest/service-rest';
import { LoadingController } from 'ionic-angular';
import { AlertController} from "ionic-angular";

@Component({
selector: 'page-data',
templateUrl: 'data.html'
})
export class ResumenCooperativaPage {
cars: any;
constructor(public service: SProvider,
public loadingController: LoadingController) {
this.getData();
}
getData() {
this.service.getCars()
.subscribe(data => {
if (data.error) {
console.log(data.error);
} else {
this.cars = data;
}
});         
}
}

这是我想首先访问令牌然后再查看它的服务ts。令牌变量总是show undefined。服务.ts

getToken(){
return new Promise(resolve => {
this.storage.get('Token').then((val) => {   
resolve(val);  
console.log('Your token is', val);  
}); 
});
}
getCars() {
this.data= this.getToken();
const hd = new HttpHeaders().set('Authorization', this.data)
.set('Authorization', 'Bearer ' + this.data);
return this.http.get(url, { headers: hd})
.map((response) => {
return response;
});  
}

更新：

更改后的消息：

[ts] Property 'subscribe' does not exist on type 'void'.
getCars() {
this.getToken().then(token=>{
this.data = token;
const hd = new HttpHeaders().set('Authorization', this.data).set('Authorization', 'Bearer ' + this.data);
return this.http.get(url, { headers: hd}).map((response) => {
return response;
}); 
})     
}

无效

Answer 1

好吧，因为你的代码很难理解，我想和你分享我将如何组织它，请注意，我还不知道你使用的是哪个http模块，现代(4.3+角度(模块和旧模块之间有区别。我写下了下面的想法是现代的：

在您的rest-service.ts(您将导入组件的提供者(中：

// do all of your specific imports here:
import { Injectable } from '@angular/core';
import { Storage } from "@ionic/storage";
@Injectable()
export class RestService {
// cache token here to use in your restful calls:
userToken: string;
constructor (
) {
// obtain token once during service instantiation, service providers don't have lifecycle hooks but it is OK to do init values inside the constructor:
this.getToken();
}
// this will get called once with constructor execution:
getToken() {
this.storage.get('Token').then((token) => {   
this.userToken = token; 
}); 
};
getCars() {
// depending on your HTTP module used in Ionic (Angular < 4.3 or > 4.3):
// only set Authorization property in header once:
const headers = new HttpHeaders().set('Authorization', 'Bearer ' + this.userToken);
// so http requests will return observables (if Angular 4.3 HttpClient module is used), you will subscribe to it in your components:
return this.http.get(url, { headers: headers})
}
}

现在在你的车里。ts:

// do your proper imports here:
import { Component } from '@angular/core';
import { NavController, MenuController } from 'ionic-angular';
import { RestService } from '../../app/providers/rest-service';
import { LoadingController } from 'ionic-angular';
import { AlertController} from "ionic-angular";
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
// component var that will get assigned values:
cars: Array<string> = [];
constructor(public restService: RestService, public loadingController: LoadingController) {
}
// this life cycle hook is only called once when component enters memory, feel free to use other hooks as needed for your app, but key thing is that you call method in provider and subscribe/unsubscribe in components.
ionViewDidLoad() {
// here on component load into memory you can call the method:
this.restService.getCars().subscribe((carsData) => {
this.cars = carsData;
}, (error)=>{
console.log(error);
});  
}
}

您的模板可以是：

<ion-header>
<ion-navbar>
<ion-title>Home</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<h2>Welcome to Cars Page!</h2>
<ion-list>
<ion-item *ngFor="let car of cars">
<ion-label>{{ car.title }}</ion-label>
</ion-item>
</ion-list>
</ion-content>