1

estoy teniendo problemas para poder recuperar una variable de una clase servicio hacia un componente. El problema esta comentado en la función isAuthenticated() del archivo app.component.ts

autentication.service.ts

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { Storage } from '@ionic/storage';
import { ToastController, Platform } from '@ionic/angular';
import { BehaviorSubject } from 'rxjs';


@Injectable()
export class AuthenticationService {

  authState = new BehaviorSubject(false);
  public token : string;

  constructor(
    private router: Router,
    private storage: Storage,
    private platform: Platform,
    public toastController: ToastController
  ){
    this.ifLoggedIn();
  }

  async ifLoggedIn() {
    await this.storage.get('token').then((token) => {
      if(token){
        this.authState.next(true);
        this.token = token;
        console.log(this.token); //El token existe en este punto
      }
    });
  }

  login(){
    this.storage.set('token', 'asd123asdasd12354151asd').then((response) => {
      this.router.navigate(['app/inicio']);
      this.authState.next(true);
    });
  }

  logout(){
    this.storage.remove('token').then(() => {
      this.router.navigate(['app/inicio']);
      this.authState.next(false);
    });
  }

  isAuthenticated(){
    return this.authState.value;
  }

  getToken(){
    return this.token;
  }



}

app.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { Events, MenuController, Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AuthenticationService } from './authentication.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: [
    './side-menu/styles/side-menu.scss',
    './side-menu/styles/side-menu.shell.scss',
    './side-menu/styles/side-menu.responsive.scss'
  ]
})
export class AppComponent {

  isAuth : boolean;

  constructor(
    public auth : AuthenticationService,
    private events: Events,
    private menu: MenuController,
    private platform: Platform,
    private splashScreen: SplashScreen,
    private statusBar: StatusBar,
    private router: Router,
  ) {
    this.initializeApp();
  }

  initializeApp() {
    this.platform.ready().then(() => {
      this.statusBar.styleDefault();
      this.splashScreen.hide();
      this.isAuthenticated();
    });
    //this.isAuthenticated();
  }

  isAuthenticated(){
    console.log(this.auth.getToken()); // devuelve un "undefined"
    console.log(this.auth.token); // devuelve un "undefined"
    console.log(this.auth); // y este es el más curioso devuelve el objeto auth y dentro del objeto se ve seteado el token y no puedo acceder a él de las formas anteriormente dichas.....
  }

  logOut(){
    this.auth.logout();
  }
}

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

¿Que estoy planteando mal? Muchas gracias!

5
  • Primero, deberías usar subscribe para acceder al valor del Observable. Segundo, es posible que storage.get('token') nunca te devuelve un valor, por ende, token queda como undefined.
    – gugadev
    Commented el 20 jun. 2019 a las 12:27
  • @gugadev el valor del token en storage.get('token').then() si que lo obtiene y lo seteo a una variable publica de la clase
    – pwron
    Commented el 20 jun. 2019 a las 12:35
  • La llamada a ifLoggedIn() es asíncrona. Tienes que esperar a que termine para que puedas ver tus resultados. Puedes usar una promesa para su ejecución.
    – Legna
    Commented el 20 jun. 2019 a las 13:28
  • Buenas gracias @Angel lo se, con ello estaba intentando hacer q a la hora de crear el objeto espere a ello , pero no lo hace. No hay forma de crear un objeto de forma asyncrona y poder acceder a su variable ya procesada?
    – pwron
    Commented el 20 jun. 2019 a las 13:50
  • Mete esa función en una promesa y llámala con el subscribe desde app.component.ts
    – Legna
    Commented el 20 jun. 2019 a las 14:24

1 respuesta 1

0

La consola del navegador no es fiable. Prueba los siguientes pasos:

  1. Abre las DevTools (la consola) y escribe lo siguiente:

    let test = [ 2,4,6,8,10,12]
    
  2. Escribe en consola

    test
    

    Te aparecerá algo como una flecha seguida del texto:

    (6) [2, 4, 6, 8, 10, 12]
    

    No des a la flecha (no despliegues el array)

  3. Escribe a continuación

    test.push(14);
    
  4. Ahora despliega la flecha anterior, verás algo como

    (6) [2, 4, 6, 8, 10, 12]
    0: 2
    1: 4
    2: 6
    3: 8
    4: 10
    5: 12
    6: 14
    length: 7
    __proto__: Array(0)
    

Esto es porque la consola calcula los valores bajo demanda, por tanto siempre verás el valor actualizado al momento de desplegar.

Tu problema

Cuando la consola escribe undefined, la promesa que rellena el token aún no se ha cumplido. Cuando despliegas el objeto, unas décimas de segundo después, la promesa se ha cumplido y la propiedad token ya tiene un valor. Si te fijas, en tu propia imagen se ve algo similar: las propiedades de AuthenticationService están listadas entre las llaves y no incluyen token. Si fuese porque no caben todas, verías una elipsis justo antes de la llave de cierre:

window
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
1
  • Buenas Pablo gracias , he cambiado las posiciones de los logs , he subido una nueva imagen , he puesto primero el objeto y como veras esta seteado el token y despues tampoco lo puedo acceder. Creo que esto demuestra que la consola en este caso no es el problema. Mil gracias.
    – pwron
    Commented el 20 jun. 2019 a las 13:57

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.