1

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.

10
  • O log "Antes de fazer a chamado da API" está aparecendo ou nem isso?
    – Costamilam
    Commented 26/02/2019 às 19:40
  • Não, nem aparece. Commented 26/02/2019 às 19:40
  • Tenta tirar o { providedIn: 'root' } do Injectable Commented 26/02/2019 às 19:45
  • Não rolou também... :( Commented 26/02/2019 às 19:50
  • Edita sua pergunta com o SummonerService Commented 26/02/2019 às 20:07

1 Resposta 1

2

Fabricio parece que o problema é que vc esta usando o http invés do http Client

Primeiro remova o HttpModule do seu módulo principal.

E no seu serviço: import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class SummonerService {

  private url = environment.endpoint;


 private httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json', //acho que nao precisa ele adiciona automaticamente por default
     'Access-Control-Allow-Origin': 'http://localhost:4200/'
  })
};


  // tslint:disable-next-line: deprecation
  constructor(private httpClient: HttpClient) { }

  public getByName(summonerName: string): Observable<Summoner> {
    return this.http
      .get<Summoner>(`${this.url}/summoner/v4/summoners/by-name/${summonerName}`, this.httpOptions)

  }
}
1
  • Opa Eduardo, sim era exatamente isso que estava ocorrendo. Commented 27/02/2019 às 16:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .