Unable to skip login page after logging in once ionic 3

Question

I am making a login app with MySQL database. I have already done login but when I close my app or press the back button of my mobile, it starts from login page again.

I tried to save the login data in local storage but it does not work. I have been searching online for some answers but I can't seem to find the solution.

Below is my code

login.ts

signIn(page) {
if(this.username.value==""){
  let alert = this.alertCtrl.create({

    title:"ATTENTION",

    subTitle:"Username field is empty",

    buttons: ['OK']

    });

    alert.present();
}else if(this.password.value=="") {
  let alert = this.alertCtrl.create({

    title:"ATTENTION",

    subTitle:"Password field is empty",

    buttons: ['OK']

    });

    alert.present();
}
else {
  var headers = new Headers();
  headers.append("Accept", 'application/json');

  headers.append('Content-Type', 'application/json' );

  let options = new RequestOptions({ headers: headers });

  let data = {

    username: this.username.value,
    password: this.password.value

    };
  let loader = this.loading.create({
    content: 'Processing please wait…',    
    });
  loader.present().then(()=>{
    this.http.post('http://mybusket.com/webapi/carapi/logincheck.php',data,options)
    .map(res=>res.json())
    .subscribe(res=>{
      console.log(res)
      loader.dismiss()
      if(res>0) {
        localStorage.setItem('response',JSON.stringify(res));
          console.log(JSON.parse(localStorage.getItem('response')));


          this.navCtrl.push(page)
      }
      else{
        let alert = this.alertCtrl.create({

          title:"ERROR",

          subTitle:"Your Login Username or Password is invalid",

          buttons: ['OK']

          });

          alert.present();
      }
    });
  });    
}
}

when I click the button, SignIn function runs and navigates to the menu page which is connected to welcome page.

menu.ts

export class MenuPage {

rootPage = 'Welcome';
pages = [
{ title: 'Home', component: 'Welcome' },
{ title: 'Qr Code', component: 'QrPage' },
  { title: 'Logout', component: 'LogoutPage' }
];

@ViewChild('content') nav: NavController;

constructor(public navCtrl: NavController, public navParams: NavParams) 
{
}

ionViewDidLoad() {
console.log('ionViewDidLoad MenuPage');
}

 openPage(page) {
// Reset the content nav to have just this page
// we wouldn't want the back button to show in this scenario
this.nav.setRoot(page.component);
}

}

I am working with lazy loading in ionic 3.

I want it so that when I log in the app, it does not require login again also when I press back button of my device app switches off.

your code is not 100% clear to me. so, basically when you present the login page you should check automatically (in ionViewDidLoad() for example), if any valid login info is stored in localStorage and if so, you can proceed to the next page. are you doing any check like this? where are you expecting the code to identify that your user has already logged in before? if i understand your code correctly, you are just doing such check after the user presses a button. — slashpm
this menu page connected to another page....menu as show side menu.I already store data in local storage and print in next page.But when i off the app or press back button it goes to login page again. — Arpan Sarkar

Mystery Mystery · Accepted Answer · 2018-07-18T08:56:18

When you login, you only save the response to your local storage. You dont have a checker if you are already logged in or not. So to stay logged in the app, you need to have a checker.

If you logged in successfully, create an item in local storage. For example, set an item isLoggedIn to true.

localStorage.setItem('isLoggedIn',true);

When you exit and re-launch the app, first thing you will do is to check the isLoggedIn from your local storage. If it is true, then navigate to the Welcome page. Otherwise, go to the Login page.

When you logout, make sure to change the isLoggedIn to false, or simply remove it.

EDIT:

Depending on your rootpage for the whole app which you can locate in your app.component.ts. (rootpage is the first page that will be shown when opening your app)

If your rootpage for the whole app is your Signin page, your .ts file should have

constructor{

    //check if the isLoggedIn in the local storage exists or is true
    if(localstorage.getItem('isLoggedIn')){

    // if it is true, set the menupage (which is connected to your welcome page) as root. 
        this.navCtrl.setRoot(MenuPage); 
    }

}

Additionally, in your Signin page. In your signin(page) method, adjust this

if(res>0) {
    localStorage.setItem('response',JSON.stringify(res));
      console.log(JSON.parse(localStorage.getItem('response')));

    // add this
    // set the isLoggedIn to true
    localStorage.setItem('isLoggedin', true);

    this.navCtrl.push(page)
}

PS> this may not work syntactically correct as I can't see your whole code. This is for your guide only, adjust the code if necessary.

Unable to skip login page after logging in once ionic 3

1 Answers