0

Estoy haciendo un servicio de autentificación, si es correcto te permite seguir, pero sino, te puede sacar varios mensajes, El problema es que no sé como llevarme las variables del servicio al componente para que lo pueda mostrar en la vista.

Servicio :

 export class DataService {

  public errorMessage: string;
  public showAlert: boolean = false;

 public checkCredentials(url:string, username:string, password:string):Observable<any>{

    return this.http.get<Object>(url).pipe(tap (users => { 

      const checkCookie = this.cookie.get('login');

      if (users.find(u => u.user === username)) {
          this.usuario = users.find(u => u.user === username);
          if (username === this.usuario.user && password === this.usuario.pass && !checkCookie) {
            this.cookie.set('login', this.usuario.mail);
            this.router.navigate(['configuration']);
          } else {
              this.errorMesssage = 'Se han introducido unas credenciales incorrectas';
              this.showAlert = true;
          }
      } else {
          this.errorMessage = 'El usuario introducido no se ha encontrado';
          this.showAlert = true;
      }

      return this.errorMesssage;

     }));

1º Aquí tengo que enviar el Mensaje y el boolean y sólo tengo un return.

2º Además da error else {

   this.errorMesssage = 'Se han introducido unas credenciales incorrectas';

El error es :

La propiedad "errorMesssage" no existe en el tipo "DataService". ¿Quería decir "errorMessage"?

3º Cómo recibir los returns del servicio en el componente.

  const url = 'assets/users.json';
  this.service.checkCredentials(url,this.username,this.password).subscribe();

Editado -->

Servicio :

public checkCredentials(url:string, username:string, password:string):Observable<any>{

    return this.http.get<Object>(url).pipe(tap (users => { 

      const checkCookie = this.cookie.get('login');
      let messageError = { message:"", showAlert:false };
      if (users.find(u => u.user === username)) {
          this.usuario = users.find(u => u.user === username);
          if (username === this.usuario.user && password === this.usuario.pass && !checkCookie) {
            this.cookie.set('login', this.usuario.mail);
            this.router.navigate(['configuration']);
          } else {
            messageError.message = "Se han introducido unas credenciales incorrectas";
            messageError.showAlert= true;
          }
      } else { 
        messageError.message = "El usuario introducido no se ha encontrado";
        messageError.showAlert= true; 
      }

        return messageError;

     }));
 }

Component

 public checkCredentials = function () {
        const url = 'assets/users.json';
        this.service.checkCredentials(url, this.username, this.password).subscribe(result => {
            console.log('result', result); //Devuelve a los usuarios
            this.errorMessage = result.message;
            this.showAlert = result.showAlert;
        });
    }

Si en vez de usar tap uso map, salta un error en el find o eso o todo el código se pone en rojo

1 respuesta 1

1

Si quieres que tu return devuelva varios parametros lo mejor es crear una Interface

export interface Error {
  message: string,
  showAlert: boolean
}

Pero si crees que no es necesario puedes devolver el objeto de la siguiente manera:

 let messageError = {message:"Error", showAlert:true};
  return messageError;

Para leer el resultado en el componente lo tienes que realizar de la siguiente manera:

  const url = 'assets/users.json';
  this.service.checkCredentials(url,this.username,this.password).subscribe(result => {
    let mensajeError = result.message;
    let showAlerrt = result.showAlert;
});

Editado. Usa map en lugar de tap si lo que quieres es que te devuelva un objeto distinto del que recibes.

public checkCredentials(url:string, username:string, password:string):Observable<any>{

    return this.http.get<any>(url).pipe(map (users => { 

      const checkCookie = this.cookie.get('login');

      if (users.find(u => u.user === username)) {
          this.usuario = users.find(u => u.user === username);
          if (username === this.usuario.user && password === this.usuario.pass && !checkCookie) {
            this.cookie.set('login', this.usuario.mail);
            this.router.navigate(['configuration']);
          } else {
              this.errorMesssage = 'Se han introducido unas credenciales incorrectas';
              this.showAlert = true;
          }
      } else {
          this.errorMessage = 'El usuario introducido no se ha encontrado';
          this.showAlert = true;
      }

      return this.errorMesssage;

     }));

Espero que te funcione.

8
  • He hecho lo que has dicho y no va, Le he puesto console.log() al result y me está devolviendo todos los usuarios del sistema, no el messageError
    – EduBw
    Commented el 25 jun. 2018 a las 12:01
  • Actualiza el código con lo que tienes ahora mismo para ver que ocurre, ya que es raro que te devuelva todos los usuarios del sistema.
    – lDanny7
    Commented el 25 jun. 2018 a las 12:37
  • Aparte de lo que te comente en lugar de tap tendrías que usar map para que te devuelva lo que pones en el return.
    – lDanny7
    Commented el 25 jun. 2018 a las 12:54
  • vale, voy a actualizar, es que si uso map, no me deja usar find
    – EduBw
    Commented el 25 jun. 2018 a las 13:03
  • ya está actualizado.
    – EduBw
    Commented el 25 jun. 2018 a las 13:06

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.