Remember user login


#1

I’m making an app in ionic but stuck at a place, so basically what I need is once a user logs in inside the app and closes it the user should remain logged in and next time when he opens the app it should directly take him to the app without login page but if he opts to logout then he have to provide the id and password again.
Can anyone help me out

below is my code

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, LoadingController } from 'ionic-angular';
import { HomePage } from '../home/home';
import { MyaccPage } from '../myacc/myacc';
import { MyprofPage } from '../myprof/myprof';
import { CommonTasks } from '../../app/common_tasks';
import { Http,Headers } from '@angular/http';
import * as $ from 'jquery';
import 'rxjs/Rx';


/**
 * Generated class for the UsrloginPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-usrlogin',
  templateUrl: 'usrlogin.html',
})
export class UsrloginPage {
  public username: any;
  public password: any;
  
  public loginProcessUrl: string = "http://myapilogin.php";

  constructor(public navCtrl: NavController, public navParams: NavParams, public commonTasksObj: CommonTasks, public http: Http) {

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad UsrloginPage');
  }
  close() {
    this.navCtrl.push(HomePage)
 // }
 // myacc() {
  //  console.log(this.username + " " + this.password);
  //  this.navCtrl.setRoot(MyaccPage);
  }
  myprof() {
    this.navCtrl.push(MyprofPage)
  }

  validateForm() {
    if (this.username == undefined || this.username.trim() == "") {
      this.commonTasksObj.displaySimpleToast("Please Enter your Username");
      return false;
    }
    if (this.password == undefined || this.password.trim() == "") {
      this.commonTasksObj.displaySimpleToast("Please Enter your Password");
      return false;
    }

    this.loginProcess();

  }

  loginProcess() {
    
  
     var form = new FormData();
     form.append("id", this.username);
     form.append("pass", this.password);

     this.http.post(this.loginProcessUrl, form)
       .subscribe(data => {
         console.log(data['_body']);
         var dataObj = JSON.parse(data['_body']);
         console.log(dataObj);
      // },error =>{});
       if(dataObj.status==0){
        this.commonTasksObj.displaySimpleToast("Login Successful");
      this.navCtrl.push(MyaccPage);
      var userObj = dataObj.user_data;
     }
      else{
        this.commonTasksObj.displaySimpleToast("Please Check Your Credentials");
     this.navCtrl.push(UsrloginPage);
     }
  }
  )
  }
  
}

<ion-content>
  <div class="cardlogin">
    <ion-card style="border-radius:15px; margin-top:40px">
        <ion-item class="close-btn"(click)="close();">
        <ion-icon name="close-circle" item-right></ion-icon>
        </ion-item>
      <ion-card-header>
        User Login
      </ion-card-header>
      <ion-card-content>
        <ion-list no-lines>
            <ion-item>
              <ion-input input type="text" placeholder="Username" [(ngModel)]="username" name="username"></ion-input>
            </ion-item>
            <ion-item>
              <ion-input input type="password" placeholder="Password" [(ngModel)]="password" name="password"></ion-input>
            </ion-item>
        </ion-list>
        <button ion-button block color= "#3b5998"(click)="validateForm();">Login</button>
        <a>Forgot Your Login Details</a>
      </ion-card-content>
    </ion-card>
    </div>
  </ion-content>

below is the response from api
Screenshot%20(22)


#2

Hi@uddyvky You can use ionic native storage for this purpose.If a user is logined,then the user will have a userid.Set the userid in the native storage. Next time login call native storage getvalue.if userid exist navigate to the page you want to navigate.
ionic native storage


#3

This will give you the idea for what you are trying to do
above constructor:
rootPage:any;

in constructor:
if (localStorage.getItem(“EmployeeID”) === null)
{
console.log(“not logged in”);
this.rootPage = LoginPage;
}
else
{
console.log(“already logged in”);
this.rootPage = TabsPage;
}