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
