Using Interceptor for an Angular application uses 2 APIs - Angular 10

Question

I tried some ways but I couldn't solve it. If someone can give me an idea. I'm using environments to standardize the routes of my application.

My Interceptor:

import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent} from '@angular/common/http';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
    
import { TokenService } from '../token/token.service';
    
@Injectable()
export class RequestInterceptor implements HttpInterceptor {
    
   constructor(private tokenService: TokenService){}
    
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
       if(this.tokenService.hasToken()){
            const token = this.tokenService.getToken();
            req = req.clone({
                    setHeaders: {
                        'Authorization': 'bearer ' + token
                    }
            });
       }
       return next.handle(req);
    }
}

Module core:

import { CommonModule } from '@angular/common';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { ContainerFluidModule } from '../shared/components/container-fluid/container-fluid.module';
import { RequestInterceptor } from './auth/request-interceptor';
import { MenuComponent } from './menu/menu.component';
    
    
@NgModule({
        declarations: [
            MenuComponent,
        ],
        exports: [
            MenuComponent,
        ],
        imports : [
            CommonModule,
            RouterModule,
            ContainerFluidModule
        ],
        providers: [
            {
                provide: HTTP_INTERCEPTORS,
                useClass: RequestInterceptor, 
                multi: true
            }
        ]
})
export class CoreModule {}

Edit post, to exemplify how the application is working, I will post how I managed to solve it and get the application ready in case I need to add a new API: D

Hi. welcome to stack overflow. Could you explain clearly what the question is — Abdu Manas C A
– Abdu Manas C A, Commented Apr 9, 2021 at 5:29
Hi. thanks, i will edit the question and add how i managed to solve it, i spent the night researching — Rafael Silva
– Rafael Silva, Commented Apr 9, 2021 at 11:44

alexander · Accepted Answer · 2021-04-09 08:40:02Z

0

I know that it might be a shot in the dark but I found a useful technique for dealing with multiple APIs when using interceptors:

https://dev.to/leonardovff/angular-consuming-multiple-apis-with-angular-httpclient-in-a-beautiful-way-using-interceptors-3im1

Let us know if it helps ;)

answered Apr 9, 2021 at 8:40

alexander

791 gold badge1 silver badge6 bronze badges

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

Comments

Rafael Silva · Accepted Answer · 2021-04-09 12:03:49Z

I solved my problem using this link and documentation Angular

enter link description here

My new code looks like this.

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

import { TokenService } from '../token/token.service';
import { environment } from 'src/environments/environment';

const API_URL = environment.API_URL;

@Injectable()
export class RequestInterceptor implements HttpInterceptor {

    constructor(private tokenService: TokenService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        if (this.tokenService.hasToken()) {
            if (!req.url.indexOf(API_URL)) {
                const token = this.tokenService.getToken();
                req = req.clone({
                    setHeaders: {
                        'Authorization': 'bearer ' + token
                    }
                });
            }
            return next.handle(req);
        }
    }
}

The only thing I changed was to check the url using the indexOf () method and if it is the standard URL of my API I send the header if not only return the request.

The tip is already in case you need to add more APIS to the applications.

Thank you all so much for your help :D

Collectives™ on Stack Overflow

Using Interceptor for an Angular application uses 2 APIs - Angular 10

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related