Criei um interceptor para que o mesmo mande no cabeçalho da requisição o token de acesso da API, porém, ao realizar a chamada http ele não é acionado.
Segue as implementações:
auth.interceptor.ts:
import {
HttpRequest,
HttpHandler,
HttpEvent,
HttpInterceptor,
HttpResponse
} from '@angular/common/http';
import { Observable } from 'rxjs';
import { tap } from 'rxjs/operators';
import { environment } from 'src/environments/environment';
import { Injectable } from '@angular/core';
@Injectable({ providedIn: 'root' })
export class AuthInterceptor implements HttpInterceptor {
private authHeader = 'X-Riot-Token';
constructor() { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
request = request.clone({ headers: request.headers.set(this.authHeader, environment.api_key) });
console.log('Antes de fazer a chamado da API', request);
return next.handle(request).pipe(
tap(
event => {
if (event instanceof HttpResponse) {
console.log('Sucesso: ', event);
}
},
error => {
if (event instanceof HttpResponse) {
console.log('Erro: ', error)
}
}
)
)
}
}
AppModule.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AuthInterceptor } from './shared/interceptors/auth.interceptor';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
HttpClientModule,
AppRoutingModule,
HttpModule
],
providers: [{
provide: HTTP_INTERCEPTORS,
useClass: AuthInterceptor,
multi: true
}],
bootstrap: [AppComponent]
})
export class AppModule { }
AppComponent.ts:
import { Component } from '@angular/core';
import { SummonerService } from './shared/services/summoner.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'OP Portrait';
constructor(private summonerService: SummonerService) { }
getSummoner() {
this.summonerService.getByName('Kamikat')
.subscribe(response => console.log(response));
}
}
* EDIT *
SummonerService.ts:
import { Http, Headers } from '@angular/http';
import { environment } from 'src/environments/environment';
import { Injectable } from '@angular/core';
import { Summoner } from '../models/summoner';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({ providedIn: 'root' })
export class SummonerService {
private url = environment.endpoint;
// tslint:disable-next-line: deprecation
private headers = new Headers({
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': 'http://localhost:4200/'
});
// tslint:disable-next-line: deprecation
constructor(private http: Http) { }
public getByName(summonerName: string): Observable<Summoner> {
return this.http
.get(`${this.url}/summoner/v4/summoners/by-name/${summonerName}`, { headers: this.headers })
.pipe(map(response => new Summoner(response.json())));
}
}
Poderiam me ajudar com alguma pista do que está ocorrendo?
Att.