Logout doesnt work

Ionic Framework ionic-v3
1

Hi, I have the following code that logout my app on a SplitPane, the problem is it works just some times, it logout but doesnt send me to a welcomePage…
i have in my app.html a button:

<button ion-item  (click)="logout()">
 <ion-icon item-left color="primary" name="log-out"></ion-icon>
    Desconectarse
 </button>

and my app.component.ts

export class MyApp {
  rootPage:any = WelcomePage;
  constructor()...


backToWelcome(){
    const root = this.app.getRootNav();
    root.popToRoot();
  }

  logout(){
    this.menu.enable(false);
    localStorage.clear(); //becausae i have information from user
    this.backToWelcome();
  }
}

Can help me please, thanks. Im sorry for my bad english too.

2

Hi. DId you try root.setRoot() ?
I would try something like:

@ViewChild('content') nav: NavController;
  rootPage:any = 'LoginPage'; // or WelcomePage or else...

backToWelcome(){   
   nav.setRoot(rootPage);
  }

Hope it helps.
Best regards,
J

3

thanks for reply, it is ok?:

import { Component,ViewChild } from '@angular/core';
import { Platform,App,MenuController,NavController } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { WelcomePage } from '../pages/welcome/welcome';
import { SplitPaneProvider } from '../providers/split-pane/split-pane';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  rootPage:any = WelcomePage;
  datosUsuario = {"nombres":"","apellidos":"","turno":"", "email":""};
  
  @ViewChild('content') nav: NavController;
  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,public splitPaneProvider: SplitPaneProvider, public app: App, public menu: MenuController) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
      if(localStorage.getItem('userData')){
        const data = JSON.parse(localStorage.getItem('userData'));
        this.datosUsuario.nombres= data.userData.nombres;
        this.datosUsuario.apellidos= data.userData.apellidos;
        this.datosUsuario.turno= data.userData.turno;
        this.datosUsuario.email= data.userData.email;
      }
    });
    
    
  }
  
  backToWelcome(){
    //const root = this.app.getRootNav();
    //root.popToRoot();
    this.nav.setRoot(this.rootPage);
  }

  logout(){
    this.menu.enable(false);
    localStorage.clear();
    this.backToWelcome();
  }

}
4

localStorage is IMHO useless. It should only be used for things that are intended to persist across app restarts, yet is unreliable for said usage because it can get vaped at any time by the OS. The #1 reason I see people using it seems to be because they can read from it synchronously, but I think that’s lazy.

If you need the information to persist across app restarts, use Ionic Storage and deal with the fact that it needs asynchronous reads. If you don’t, use a storage provider.

5

If it works it’s ok.
Don’t know your real use case but I agree with rapropos on the localStorage thing, even though localStorage will persist upon app restarts.
Also your usage of const instead of let is kind of weird.
Best regards,
J

6

Yeah it works, thanks a lot, but i have another problem.
I use localStorage for that users dont login everytime, and it works perfectly, so my idea is that information about profile, load into side bar (splitPane), but when users login for first time, the data isn’t show, and when it close the app and open it this data are loaded fine. I think it is cause splitPane initialize on welcomePage, so data is loaded on constructor. How can I solve it?

1
1.png830×580 31 KB

2
2.png411×591 17.9 KB

7

No it doesn’t. You have no guarantee that localStorage will persist. The OS can delete it at any time. Why do I bother writing things when nobody reads them?

8

but thats not the question…

9

Is your code entering the if(localStorage.getItem(‘userData’)){ block?
If so, then you can try placing it inside a setTimeout without time.
If even though it doesn’t work you can try forcing change detection.

Best regards,
J

10

I did it, but doesnt work

@ViewChild('content') nav: NavController;
  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen,public splitPaneProvider: SplitPaneProvider, public app: App, public menu: MenuController) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
     
    });

    setTimeout(() => this.perfil());  
  }

perfil(){
    if(localStorage.getItem('userData')){
      console.log("DENTRO");
      let data = JSON.parse(localStorage.getItem('userData'));
      this.datosUsuario.nombres= data.userData.nombres;
      this.datosUsuario.apellidos= data.userData.apellidos;
      this.datosUsuario.turno= data.userData.turno;
      this.datosUsuario.email= data.userData.email;
    }else{
      console.log("NO DENTRO");
    }
  }

I think the problem is cause split pane load in welcomePage, cause when I move my finger to the right it show my sidebar, and i need that it load just since homePage

2
2.png824×592 30.4 KB

Thanks all of you…

11

But does it enter the if?
Try placing what’s inside on the setTimeout .
And try forcing the change detection.