Angular security interceptor not adding Authentication headers on POST request

Question

I'm trying to implement JWT authentication in my Angular application with a Django backend. I thought it worked but now all the POST requests don't receive the Authenication header, which results in a 401. I'm quite new to Angular

security.interceptor.ts

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpClient } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, map } from 'rxjs/operators';
import { Router } from '@angular/router';
import { UserService } from 'src/app/services/user.service';

/**
 * Securityinterceptor
 */
@Injectable()
export class SecurityInterceptor implements HttpInterceptor {
  /**
   * Constructor
   * @param router
   * @param userService
   * @param http
   */
  constructor(private router: Router, private userService: UserService, private http: HttpClient) { }
  /**
   * Intercepts http requests. Adds authorization headers to request and re-executes request.
   * When access token is expired, the interceptor will try to refresh the accestoken and re-executes the request.
   * If the interceptor can't refresh tokens, it will throw an error
   * @param request 
   * @param next 
   */
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    let token = localStorage.getItem('token');
    if (token) {
      request = request.clone({
        headers: request.headers
          .set('Content-Type', 'application/json')
          .set('Authorization', 'JWT ' + token)
      });
    }

    return next.handle(request).pipe(
      catchError(err => {
        console.log(err);
        if (err.status === 401) {
          // Generate parameters for token refreshing
          if (err.error.messages[0].message == "Token is invalid or expired") {
            let refresh = JSON.stringify({
              refresh: localStorage.getItem('refreshToken')
            });
            // Reload tokens
            this.userService.refreshToken(refresh).subscribe(result => {
              localStorage.setItem('token', result.access);
              localStorage.setItem('refreshToken', result.refresh);

              request = request.clone({
                headers: request.headers
                  .set('Content-Type', 'application/json')
                  .set('Authorization', 'JWT ' + result.access)
              });
              location.reload(true);
            });
          } else {
            this.userService.logout(localStorage.getItem('refreshToken'));
          }
        return throwError(err);
        }
      }));
  }
}

app.module.ts

providers: [{
    provide: HTTP_INTERCEPTORS,
    useClass: SecurityInterceptor,
    multi: true
  }, GlobalVariablesService],

It's been quite some time that I haven't been able to fix this problem, any help is appreciated.

did you check in network tab if the header is present or not — Shlok Nangia
– Shlok Nangia, Commented May 7, 2020 at 9:21
try to put breakpoint where you add headers in chrome dev tools and see if the code gets executed — Shlok Nangia
– Shlok Nangia, Commented May 7, 2020 at 9:22
The headers are not present in the network tab. I'll try the setHeaders parameter! — GhettoThief
– GhettoThief, Commented May 7, 2020 at 9:32

Ghassen · Accepted Answer · 2020-05-07 09:30:15Z

2

you can set the the header by using the setHeader param . try this:

if (token) 
{
      request=req.clone({ setHeaders: { Authorization: 'JWT ' + token } });
}

answered May 7, 2020 at 9:30

Ghassen

1,2363 gold badges17 silver badges31 bronze badges

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

1 Comment

GhettoThief Over a year ago

This fixed my problem!

Collectives™ on Stack Overflow

Angular security interceptor not adding Authentication headers on POST request

security.interceptor.ts

app.module.ts

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

security.interceptor.ts

app.module.ts

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related