Http interceptor not working

Hey,

i dont know if iam doing something wrong but i cant get my http interceptor to work.

I added the translation code into my app module.

App Module:

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    IonicModule.forRoot(),
    AppRoutingModule,
    Angulartics2Module.forRoot(),
    ImgFallbackModule,
    IonicStorageModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: translateHttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  providers: [
    MediaCapture,
    IOSFilePicker,
    FileChooser,
    NetworkInterface,
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    },
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

The problem is know that when requesting the translation files it will through the interceptor but for my other http request i doesnt.

Interceptor Code:

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
import { PreferenceService } from '../services/preference.service';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
    constructor() { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        let authReq = req.clone();
        /*if (req.url.indexOf('config') || req.url.indexOf('login') || req.url.indexOf('register'))
           return next.handle(authReq);*/
        const headers = authReq.headers
            .set('Authorization', 'Bearer ${this.preferenceService.usr.token}');
        authReq = req.clone({ headers });
        return next.handle(authReq);

    }
}

Service code:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Plugins, GeolocationPosition } from '@capacitor/core';

import { PreferenceService } from './preference.service';
import { Address } from '../models/Address';

const { Geolocation } = Plugins;

@Injectable({
    providedIn: 'root'
})
export class LocationService {
    constructor(private httpClient: HttpClient, private preferenceService: PreferenceService) { }

    public async getCurrentLocation(): Promise<GeolocationPosition> {
        return await Geolocation.getCurrentPosition();
    }

    public getAddressFromCoordinates(lat: number, lon: number, zoom: number): Promise<Address> {
        return this.httpClient.get<Address>(this.preferenceService.appConfiguration.service_map_link_reverse
            .replace('{lat}', lat.toString())
            .replace('{lng}', lon.toString())
            .replace('{zoom}', zoom.toString())).toPromise();
    }

    uploadMapSnapshot(mapSnapshot: any): Promise<any> {
        const options = {
            headers: new HttpHeaders({

            })
        };

        const formData = new FormData();
        formData.append('files', mapSnapshot);
        formData.append('path', 'map');
        formData.append('refId', '5a993616b8e66660e8baf45c');
        formData.append('ref', 'user');
        formData.append('source', 'users-permissions');

        return this.httpClient.post<any>(this.preferenceService.appConfiguration.app_endpoint + '/upload', formData, options).toPromise();
    }
}

Maybe someone had the same problem or could help me out

Thanks in advantage

Best regards

Lorenzo

[jakehockey10]

@lcatania thanks for looking into it! After investigating my issue further yesterday, I determined that the 3rd party interceptor had a guard clause that allowed it to early exit. This is what was happening. I thought the interceptor wasn’t running at all but I was wrong.

Thanks again for spending the time trying to help. Much appreciated!

[neikxd]

Just my solution for one who may need:

I worked around with a filter within the HttpInterceptor

• request.url contains ‘/assets/i18n/’ → ngx-translate TranslateLoader request
• else others/our request

import { Injectable } from '@angular/core';
import {HttpRequest, HttpHandler, HttpEvent, HttpInterceptor} from '@angular/common/http';
import {Observable, EMPTY} from 'rxjs';
import {AuthService} from "../services/auth.service";
import {TokenService} from "../services/token.service";

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private accountService: AuthService, private tokenService: TokenService) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (!request.url.includes('/assets/i18n/')) {
      //other request
      let authRequest = request;
      if (!request.url.includes(environment.apiUrl + '/login')) {
        let jwtToken = this.tokenService.getToken();
        if (jwtToken === null) {
          this.accountService.login();
          return EMPTY;
        }
        authRequest = request.clone({headers: request.headers.set('Authorization', 'Bearer ' + jwtToken)});
      }
      return next.handle(authRequest)
    } else {
      //ngx-translate TranslateLoader request
      return next.handle(request)
    }
  }
}

Please report if it works for you.