0

Estoy iniciando con el Framework Ionic. Les explico el caso de uso.

Cuando inicio sesión, éste guarda el Token en el Store y luego hace otra petición al backend para pedir los datos del usuario, también lo guarda en el Store, hasta ahí todo bien.

Este es mi método en el servicio:

public login() {
  const value = this.loginForm.value;
  const valid = this.loginForm.valid;
  if (valid) {
    this.authenticationService.login(value)
      .subscribe(this.handleSuccessLogged.bind(this), 
  this.handleErrorLogged.bind(this));
  }
}

private handleSuccessLogged(response) {
  if (response.success) {
    console.log('response.data: ', response.data);

    this.loadStoreToken(response.data).then(dat => {
      console.log('set Store: ');
      this.userDataService.getUserData$()
        .pipe(
          map(response => response.data),
          tap(this.loadStoreUserData.bind(this)))
        .subscribe(() => {
          this.nav.setRoot(MyApp);
        });
    });
 } else {
  this.handleErrorLogged();
 }
}

private handleErrorLogged(response?: any) {
 this.storage.remove('token');
}

private loadStoreToken(data): Promise<any> {
  return this.storage.set('token', data.token);
}

private loadStoreUserData(data): Promise<any> {
  return this.storage.set('profile-data', data);
}

Hasta aquí todo esta bien, le envía a MyApp el componente principal y este tiene la lógica de seguridad.

export class MyApp {
  @ViewChild(Nav) nav: Nav;

  rootPage: any;

  appMenuItems: Array<MenuItem>;
  dataUsuario: any;

  constructor(
    public platform: Platform,
    public statusBar: StatusBar,
    public userDataService: UserDataService,
    public authenticationService: AuthenticationService,
    public splashScreen: SplashScreen,
    public keyboard: Keyboard
  ) {
    this.initializeApp();

    this.appMenuItems = [
      { title: 'Home', component: HomePage, icon: 'home' },
      { title: 'Local Weather', component: LocalWeatherPage, icon: 'partly- sunny' 
     }
    ];
  }

  initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      //*** Control Splash Screen
      this.splashScreen.show();
      this.splashScreen.hide();

      //*** Control Status Bar
      this.statusBar.styleDefault();
      this.statusBar.overlaysWebView(false);

      //*** Control Keyboard
      this.keyboard.disableScroll(true);
    });

    this.rootPage = LoginPage;
    this.authenticationService.getToken().then(token => {
      if (token) {
        this.nav.setRoot(HomePage);
      } else {
        this.nav.setRoot(LoginPage);
      }
    });
    this.authenticationService.getPerfilData().then(dataProfile => {
      console.log(dataProfile);
      this.dataUsuario = dataProfile || null;
    });
   }
 }

Aqui en el component es el problema que cuando quiero que en en el menú. html.

<ion-menu side="left" id="authenticated" [content]="content">
  <ion-header>
    <ion-toolbar class="user-profile">
      <ion-grid>
        <ion-row>
          <ion-col col-4>
            <div class="user-avatar">
              <img src="../assets/img/avatar.jpeg">
            </div>
          </ion-col>
          <ion-col padding-top col-8>
            <h2 ion-text class="no-margin bold text-white">
              <!-- {{ usuarioPerfilUsername }} -->
              {{ dataUsuario | json }}
            </h2>
            <span ion-text color="light">
              <!-- {{ dataUsuario | json }} | {{ dataUsuario | json }} -->
            </span>
          </ion-col>
        </ion-row>
        <ion-row no-padding class="other-data">
          <ion-col no-padding class="column">
            <button ion-button icon-left small full color="light" menuClose disabled>
              <ion-icon name="contact"></ion-icon>
              Perfil
            </button>
          </ion-col>
          <ion-col no-padding class="column">
            <button ion-button icon-left small full color="light" menuClose (click)="logout()">
              <ion-icon name="log-out"></ion-icon>
              Cerrar sesión
            </button>
            <button ion-button icon-left small full color="light" menuClose (click)="check()">
              <ion-icon name="log-out"></ion-icon>
              check
            </button>
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-toolbar>
  </ion-header>
  <ion-content color="primary">
    <ion-list class="user-list">
      <button ion-item menuClose class="text-1x" *ngFor="let menuItem of appMenuItems" (click)="openPage(menuItem)">
        <ion-icon item-left [name]="menuItem.icon" color="primary"></ion-icon>
        <span ion-text color="primary">{{menuItem.title}}</span>
      </button>
    </ion-list>
  </ion-content>

    </ion-menu>

    <ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

Cuando termina de logearse y se redirige al MyApp debería de coger los datos del usuario y mostrarlo en el menú, pero no sucede.

Los datos del usuario si recupera pero parece que no hace el refresh en el html, no hace dataBindig la variable de dataUsuario, cuando actualizo, recién se ve reflejado en el menú los datos del usuario. Me parece que es algo relacionado con que el menú aun no se muestra hace que se le abre. pero igual no se como solucionarlo.

Ayúdenme, Gracias.

1 respuesta 1

0

Bueno me responderé por si le sirve alguien.

this.menu.enable(false, 'authenticated') 

Esa linea de código hacia falta después de que el usuario de authentica.

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.