Angular 6 HTTP Interceptor not setting headers

user_3017217 0
Viewed 6364

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.

angular-http-interceptors angular typescript
3 Answers

Not setHeader but setHeaders - in plural form

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

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'),
    })
user_39935910

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

user_83588920
Related