5

I’m trying to get data from the server using token from ionic storage. The problem I’m experiencing is when the get token promise can’t retrieve the token on time. Therefore, whenever I reload or reopen the app it sometimes return with an unauthorized error.

dashboard-service.ts

authUrl = "https://sampleapi.herokuapp.com"
authHeaders;

getToken() {
this.storage.get('token').then((token) => {
  console.log('Bearer ' + token);
  this.authHeaders = {
    headers: new HttpHeaders({
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + token
    })
}
});
}

getInfo(): Observable<Info> {
return this.http.get<Info>(this.authUrl + '/api/users/info', this.authHeaders).pipe(
  catchError(this.handleError)
);
}

dashboard.ts

ionViewDidLoad() {
this._dashboardService.getToken();
this._dashboardService.getInfo().subscribe(
  info => {
    console.log('USER INFO: ' + info);
    this.info = info
  },
  error => {
    console.log('INFO ERROR: ' + error);
  }
);
}
Melchia
  • 22,578
  • 22
  • 103
  • 117
Rendell Lasola
  • 243
  • 2
  • 6
  • 14
  • 1
    Possible duplicate of [Angular 2 - Return HTTP from inside a promise](https://stackoverflow.com/questions/42788149/angular-2-return-http-from-inside-a-promise) – Suraj Rao Mar 07 '18 at 12:52

1 Answers1

4

You can return a promise from getToken then execute getInfo

getToken() {
return this.storage.get('token').then((token) => {
  console.log('Bearer ' + token);
  this.authHeaders = {
    headers: new HttpHeaders({
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'Authorization': 'Bearer ' + token
    })
}
});
}

In your page

 ionViewDidLoad() {
    this._dashboardService.getToken().then(_=> {
    this._dashboardService.getInfo().subscribe(
      info => {
        console.log('USER INFO: ' + info);
        this.info = info
      },
      error => {
        console.log('INFO ERROR: ' + error);
      }
    )
}
)
    }
Melchia
  • 22,578
  • 22
  • 103
  • 117