2

Tengo un "guard" que llama a una función en un servicio para comprobar si el usuario está logeado.

El servicio tiene esta función que he configurado como async porque dentro hay un await que espera a que "onAuthStateChanged" termine de hacer una consulta y devuelve el valor de valor control. Por lo que veo si no pusiese el async, el return tendría lugar antes de que onAuthStateChanged terminase y no devolvería el valor correcto. (No sé si esta es la mejor forma de hacer esto)

async comprobarAutentificacion() {
        let valorControl:boolean = true;
        await  this.angularFireAuth.onAuthStateChanged( user =>{
          if(user) {  
            valorControl = true;  
          } else {
            valorControl = false; 
          }
        });
        return valorControl;
}

Luego, en el guard tengo este código:

export class AuthGuard implements CanActivate {
      constructor(private servicio: MiservicioService, private router: Router){}
      private valorRetorno: boolean =false;
      canActivate(): boolean{ 
        this.servicio.comprobarAutentificacion().then( valor =>{
             this.valorRetorno = valor;
        }); 
        if(this.valorRetorno) {
            console.log("COMPROBAMOS: " + this.valorRetorno);
            return true;
        } else {
           console.log("Redirigimosssss: ");
           this.router.navigateByUrl('/login');
           return false;
        }
      }  
}

En el guard, lo primero que hago es llamar la función comprobarAutentificacion del servicio que de arriba que al ser una función async devuelve una promesa que recojo con un then(). En el cuerpo del then lo que hago es asigar el valor a la variable **valorRetorno **.

Justo después lo que hago es comprobar con un IF dicha variable y retornar un true o false que recoge la ruta especificada en el archivo de rutas. Creo que este if no está bien pq puede que ejecute antes que la llamada a this.servicio.comprobarAutentificacion() al ser todo asíncrono en este bloque de cófigo. Podría hacer que esta función del guard fuese Async y la llamada al servicio fuese con un awair, peor me devlvería una promesa y esta función no puede devolver promesas para que el archivo de rutas funcione. ¿Es así?¿ cómo puedo mejorar esto?

1 respuesta 1

4

Problema

Tu guard no está manejando correctamente la llamada a this.servicio.comprobarAutentificacion() ya que es una función asíncrona.

private valorRetorno: boolean = false;

canActivate(): boolean{   
    this.servicio.comprobarAutentificacion().then( valor =>{
        this.valorRetorno = valor;
    });
    
     if(this.valorRetorno) { // <- aquí 'this.valorRetorno' sigue siendo false como cuando se declaró. Ya que la línea anterior solo dispara la ejecución de la promesa 'comprobarAutentificacion()'.
        console.log("COMPROBAMOS: " + this.valorRetorno);
        return true;
     } else { // Por lo que siempre entrará por el else ya que es 'false'
       console.log("Redirigimosssss: ");
       this.router.navigateByUrl('/login');
       return false;
     }
}

Solución

Para solucionar esto, canActivate puede devolver una Promesa o un Observable.

Esto sería:

canActivate(): Promise<boolean> | boolean{   
    return this.servicio.comprobarAutentificacion().then(valor =>{
        this.valorRetorno = valor;
        if(this.valorRetorno) { // <- aquí 'this.valorRetorno' es igual a 'valor' podrías usar directamente el parámetro 'valor'
           console.log("COMPROBAMOS: " + this.valorRetorno);
           return true; // acá en el "futuro" se resolverá la promesa y Angular sabrá si puede o no activar la ruta
       } else {
          console.log("Redirigimosssss: ");
          this.router.navigateByUrl('/login');
          return false; // acá en el "futuro" se resolverá la promesa y Angular sabrá si puede o no activar la ruta
     }
    });
}

De esta forma le dices a Angular que el guard CanActivate se resolverá asincrónicamente y que espere a su resolución.

3
  • Muy buena explicación.
    – user112766
    Commented el 24 jul. 2021 a las 21:48
  • Pero tengo una duda con respeto a eso que pones de "Promise<boolean> | boolean". intuyo que es algo que inica que : a= o bien retorna una promesa con un boolean... o b) retorna directamente un boolean . Es algo así?
    – user112766
    Commented el 24 jul. 2021 a las 21:51
  • 1
    Si, creo que funciona sin el "| boolean" Commented el 25 jul. 2021 a las 22:00

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.