0

Tengo un problema con el siguiente servicio: El cual cuando invoca al end point construye una url con 3 parámetros el cual al ser invocado renderiza una vista del servidor. Al realizar el subscriber de este servicio en el component, en el network si me arroja la vista pero en consola me arroja "ERROR OK" No se como es la forma correcta de consumir este servicio Ya que quiero que esa url se abra en el navegador

public clientId = 'newClient';
public redirectUri = 'http://localhost:3000';


constructor(private httpClient: HttpClient) { }

getOauth() {
    const headers = new HttpHeaders({ 'Content-type': 'application/x-www-form-urlencoded; charset=utf-8' });

    const params = new HttpParams({
      fromObject:{
        client_id: '3',
        response_type: 'code',
        redirect_uri: this.redirectUri
      }
    });
    //return this.httpClient.post(`${environment.apiUrl}/oauth2/authorize`, params.toString(), { headers: headers });
    return this.httpClient.get<any>(`${environment.apiUrl}/oauth2/authorize`, { params: params, headers:headers } )
  }

}

MI COMPONENTE QUE CONSUME LO TENGO ASI

 uriOauth2 (){
this.oauthService.getOauth().subscribe(val => console.log(val));
}

1 respuesta 1

0

puedes hacer uso de promesas y manejar la respuesta de una manera más controlada en el componente.

import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { environment } from '@environments/environment';

export class ConsultationService {

  headers: HttpHeaders = new HttpHeaders(
    { 'Content-type': 'application/x-www-form-urlencoded; charset=utf-8' }
  );

  params: HttpParams = new HttpParams({
    fromObject: {
      client_id: '3',
      response_type: 'code'
    }
  });

  constructor(
    private http: HttpClient
  ) { }

  getOauth(): Promise<any> {
    return this.http.get(`${environment.apiURL}/oauth2/authorize`, { params: this.params, headers: this.headers }).toPromise();
  }
}

Ahora bien, si entendí bien quieres redirecciónar a una URL en especifico cuando el servicio responda, puedes usar el router.navigateByUrl() en caso de que sea una ruta del mismo proyecto o usar una función propia de Javascript con window.open(), siguiente esta lógica, sería de la siguiente manera.

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { ConsultationService } from '@services/consultation.service';

@Component({
  selector: 'consultation',
  templateUrl: './consultation.component.html',
  styleUrls: ['']
})
export class ConsultationComponent {

 constructor(
  private router: Router,
  private _consultationService: ConsultationService
 )

 uriOauth2(){
   this._consultationService.getOauth().then( (response: any) => {
    //Aquí realizas la lógica que deseas, y controlas mejor la respuesta, ya que aquí se ejecutará después de obtener una respuesta por parte del endpoint.
   console.log(response);
    
  //Si quieres redireccionar a una URL en especifico dentro de la aplicación sería así:
   this.router.navigateByUrl('/url');

  //De la manera de redireccionar con javascript (se puede paginas o URLs externas, sería así:
   window.open('url);
  }).catch((error: any) => console.error(error));
 }
}
1
  • Gracias, logre obtener mi codigo
    – user231333
    el 22 abr. 2022 a las 20:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.