angular - Getting Variable Undefined on the first http get request -

i want pass query string api_toke={{tokenstored}} every request. below code i've used achieve it. problem token undefined when page gets called after working expected. how solve this?

this error thrown in console

polyfills.js:3 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 

component

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");       });   }  } 

my custom http provider

import { injectable } '@angular/core'; import { http, requestoptions, urlsearchparams } '@angular/http'; import * appconfig '../../app/app.config'; import {storage} '@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);   }  } 

what can suggest :

1- sure token in localstorage , key 'token' :-)

2 - maybe use plug in angular2/4 , ionic 2/3 app quivalent of angularjs , ionic 1 http interceptor .. can suggest youthis 1 (i use this) : angular2-http-interceptor (https://www.npmjs.com/package/angular2-http-interceptor)

then can this:

a) create model token response end like:

export class auth {     public access_token: string;     public username: string;  } 

b) create service (with no @inject() decoration) like:

import { request, response } '@angular/http'; import { ihttpinterceptor } 'angular2-http-interceptor'; import { auth } '../models/index';   export class authinterceptor implements ihttpinterceptor {     constructor() {      }      before(request: request): request {         if (localstorage && localstorage.length > 0 && localstorage.getitem("authdata")) {              var auth = json.parse(localstorage.getitem("token")) auth;             if (!auth || !auth.access_token) return request;              request.headers.set("authorization", "bearer " + auth.access_token)         }         return request;     }   } 

c) in app.module use this:

 httpinterceptormodule.withinterceptors([{             deps: [],             provide: httpinterceptor,             useclass: authinterceptor,             multi: true         }]) 

now every time http request automatically check if have token , inject in header of request .. hope helps you! ...

n.b if need change way pass token (maybe in querystring , not in header of request) can change b) point , it's reflected request