Angular 6 HTTP Interceptor not setting headers

Question

I'm trying to make a jsonwebtoken interceptor and for some reason it doesn't set the header at all.

For my providers I have

import { TokenInterceptorService } from './token-interceptor.service';
...
providers: [AuthService, AuthGuard, {
        provide: HTTP_INTERCEPTORS,
        useClass: TokenInterceptorService,
        multi: true
}]

as my TokenInterceptorService is pretty simple too:

import { Injectable } from '@angular/core';
import { HttpInterceptor } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class TokenInterceptorService implements HttpInterceptor {

    constructor() { }

    intercept(req, next) {

        let tokenizedReq = req.clone({
            setHeader: {
                Authorization: 'Bearer xx.yy.zz'
            }
        })

        return next.handle(tokenizedReq);
    }
}

if I log tokenizedReq the headers have nothing. I must be overlooking something.

Is service lazy loaded?

Vova Bilyachat
– Vova Bilyachat

2018-08-28 07:14:00 +00:00
Commented Aug 28, 2018 at 7:14 — Vova Bilyachat
– Vova Bilyachat, Commented Aug 28, 2018 at 7:14

Suren Srapyan · Accepted Answer · 2018-08-28 07:11:57Z

8

Not setHeader but setHeaders - in plural form

let tokenizedReq = req.clone({
     setHeaders: {
         'Authorization': 'Bearer xx.yy.zz'
     }
})

answered Aug 28, 2018 at 7:11

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

2 Comments

ErraticFox Over a year ago

Extremely upset at myself as I spent two hours on this. Thank you.

Suren Srapyan Over a year ago

This is programming :)

Yousef khan · Accepted Answer · 2018-08-28 07:12:37Z

2

setHeader is nothing.

Either use setHeaders: {} like

        let tokenizedReq = req.clone({
            setHeaders: {
                Authorization: 'Bearer xx.yy.zz'
            }
        })

or use

    let tokenizedReq = req.clone({
        headers: req.headers.set('Authorization','Bearer xx.yy.zz'),
    })

answered Aug 28, 2018 at 7:12

Yousef khan

3,2443 gold badges17 silver badges18 bronze badges

Comments

Shashikant Devani · Accepted Answer · 2018-08-28 07:24:18Z

0

Try with the help of Observable.

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {    
    request = request.clone({
      setHeaders: {
        Authorization: 'Bearer xx.yy.zz'
      }
    });
    return next.handle(request);
  }

answered Aug 28, 2018 at 7:24

Shashikant Devani

2,4641 gold badge15 silver badges29 bronze badges

2 Comments

ErraticFox Over a year ago

I'm quite new to Angular and Typescript. What help do observables give me in this compared to not using them at all like I am now? I've Googled Observables plenty of times, but never really found "why" I'd need it.

Shashikant Devani Over a year ago

angular.io/guide/observables-in-angular : This link help you to understand what is observable, and what are the advantage of it.

Collectives™ on Stack Overflow

Angular 6 HTTP Interceptor not setting headers

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related