Making Global Authorization Header in HttpClient Interceptor

Question

I am making a global authorization header in my app. I've used the interceptor so i won't declare the authorization header in my get() functions. Am i correctly implementing the interceptor since when i call the get() functions, it still asking for the token. It says token is not provided. Is there a problem in my auth.interceptor? Should i declare the authorization header bearer token in every get() functions? I thought the interceptor is called every time there's a request sent/receive?

auth.interceptor.ts

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    private authService: AuthService;

    constructor(private injector: Injector) {}

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        // Get the auth header from the service.
        this.authService = this.injector.get(AuthService);
        const token = this.authService.getToken();
            if (token) {
                req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) });
            }

            if (!req.headers.has('Content-Type')) {
                req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
            }

            req = req.clone({ headers: req.headers.set('Accept', 'application/json') });
            return next.handle(req);
        }
}

products.component.ts

getAll() {
    return this.httpClient.get<any>(this.url).map(response => response.json());
    }

Aniruddha Das · Accepted Answer · 2017-09-25T03:25:54.580

1

You are doing right way!

Interceptors are for intercepting all the http calls and you can change request which is global.

I think the problem in these conditions. you can debug them and resolve them.

            if (token) {
                req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) });
            }

            if (!req.headers.has('Content-Type')) {
                req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') });
            }

Maybe some they are returning null!

But if the timing is the issue to get the token, you can make async call to get the token.

this.authService.LoginUser().subscribe(( token) => { 
   if (token) { 
     req = req.clone({ headers: req.headers.set('Authorization', 'Bearer ' + token) }); 
   } 

   if (!req.headers.has('Content-Type')) { 
     req = req.clone({ headers: req.headers.set('Content-Type', 'application/json') }); 
   } 

   req = req.clone({ headers: req.headers.set('Accept', 'application/json') }); 
   return next.handle(req); 
} 
});

edited Sep 25 '17 at 03:25

answered Sep 25 '17 at 02:54

Aniruddha Das

20,520
23
96
132

try to debug that. may be content-type is not there in heard – Aniruddha Das Sep 25 '17 at 02:58
But why i can login to my app? How can i debug it> – Joseph Sep 25 '17 at 02:59
put some break point and see is the execution is coming to here and everything is ok. one more thing. i am sure you added this interceptor into your module, right? – Aniruddha Das Sep 25 '17 at 02:59
yes. in the core module. not in the app module. the core module is exported to the app module – Joseph Sep 25 '17 at 03:00
may be you need to add it in the app module as its the bootstrap module. so put a break point and see during execution calls are coming to here – Aniruddha Das Sep 25 '17 at 03:05
I've changed the const token = this.authService.getToken(); To const token = localStorage.getItem('auth_token');. It is working now. Will that be ok? – Joseph Sep 25 '17 at 03:06
yes, if its available in local storage then it okey. make sure its always available in client browser local storage and its not a sucurity issue :) – Aniruddha Das Sep 25 '17 at 03:11
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/155218/discussion-between-aniruddha-das-and-joseph). – Aniruddha Das Sep 25 '17 at 03:12

Making Global Authorization Header in HttpClient Interceptor

1 Answers1