Error of appending http headers in ionic3?

Question

I have to append header with all Http requests. But now none of my api call works.

In the below-mentioned code the first function is my HTTP request get.The second function appends header.

//http service to get
get(subUrl?:string, params?:object) {
        let optionalParam:URLSearchParams = new URLSearchParams();
        if (params) {
            for (let item in params) {
                optionalParam.set(item, params[item]);
            }
        }
        return this.createCustomHeader()
            .switchMap((headers)=> {
                console.log('headers inside swithmap', headers);
                return this.http.get(this.url + subUrl,
                    {search: optionalParam, headers: headers})
                    .map(response => response.json())
                    .catch(this.handleError)
            });
    }


//function to append header

    private createCustomHeader() {
        return Observable.create(obse=> {
            this.dbservice.getToken().subscribe(res=> {
                let headers = new Headers();
                console.log('fetch token', res);
                headers.append('Authorization ', `Bearer ${ res.access }`)
                headers.append('Content-Type', 'application/json');
                headers.append('Accept', 'application/json');
                obse.next(headers);
                obse.complete();
            })
        });
    }

function to get token

getToken() : Observable<any>{
    return Observable.create(obse=>{
        let db = new SQLite();
        db.create({
            name: "data.db",
            location: "default"
        }).then((db: SQLiteObject) => {
            db.executeSql('SELECT token,refresh_token FROM login',[])
                .then(res => {
                    if (res.rows.length > 0) {
                        for (var i = 0; i < res.rows.length; i++) {
                             this.token=(res.rows.item(i).token);
                             this.refresh_token=(res.rows.item(i).refresh_token);
                            if(this.token && this.refresh_token){
                                // console.log('Both token found');
                                const tok={'access':this.token ,'refresh':this.refresh_token};
                                // console.log('edfghjhgfdfghjhgfdsdfghj--99--',tok);
                                obse.next(tok);
                            }else {
                                obse.next(false);
                            }
                            obse.complete();
                        }
                    }else
                    {
                        obse.next(false);
                        obse.complete();
                    }
                })
                .catch(e => {
                    obse.error(e);
                    // console.log(e);

                });
        }).catch(e => {
            // console.log(e);
            obse.error(e);

        });
    });

}

Please, correct me. Thanks

Will you please explain this "return Observable.create" inside createCustomHeader ? — Vivek Doshi
– Vivek Doshi, Commented Oct 25, 2017 at 6:55

Sayooj · Accepted Answer · 2017-10-30 05:31:24Z

1

Few things to note

You should fetch the token from db after platform ready .
Once you fetch token , use BehaviourSubject next . In your database service ,create a behaviour subject

tokenSub= new BehaviorSubject({}); accessToken(){ return this.tokenSub.getValue(); }

In the callback of getToken()

this.tokenSub.next(tok);

Append header
`private createCustomHeader() {
```
let token = this.dbservice.accessToken();
let header = new Headers();
if (token.hasOwnProperty('access')) {
    header.append('Authorization', 'Bearer ' + token['access']);
}
header.append('Content-Type', 'application/json');
header.append('Accept', 'application/json');
return header;
```
}`

answered Oct 30, 2017 at 5:31

Sayooj

3753 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

udith Over a year ago

thanks buddy, i was accessing the token before platform ready

Amir · Accepted Answer · 2017-10-25 07:09:04Z

0

Declare header outside the method.

private headers = new Headers({ 'Content-Type': 'application/json' });

And inside the method set header like below.

this.headers.set('Authorization ', `Bearer ${ res.access }`)
this.headers.set('Accept', 'application/json');

Hope this help.

answered Oct 25, 2017 at 7:09

Amir

2,0923 gold badges27 silver badges43 bronze badges

2 Comments

Amir Over a year ago

One more thing are you able to log response access token?

Amir Over a year ago

so you are able to get token. but when you are calling to api; values are not returned, right?

Collectives™ on Stack Overflow

Error of appending http headers in ionic3?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related