Hello everybody!
I am new to Ionic and I have been struggling to make my navigation works. I am using NavController’s navigateForward, navigateRoot and back functions and nearly everything is working fine but one back function I use on my login page.
I’ve been searching for this issue on the forum but nothing on Ionic 5 that can make it work…
It is really simple and I am maybe missing something very obvious.
What I do is redirecting the user with a navigateForward(’/login’) if he wants to checkout and he’s not logged in yet.
Here is my login component :
import { Component, OnInit,ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { IonBackButtonDelegate } from '@ionic/angular';
import { ServerService } from '../../service/server.service';
import { ToastController,NavController,Platform,LoadingController,Events } from '@ionic/angular';
@Component({
selector: 'app-login',
templateUrl: './login.page.html',
styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {
@ViewChild(IonBackButtonDelegate, { static: false }) backButton: IonBackButtonDelegate;
email:any;
password:any;
text:any;
loading:any;
canBack = 1;
constructor(public events: Events,private platform: Platform,private route: ActivatedRoute,public server : ServerService,public toastController: ToastController,private nav: NavController,public loadingController: LoadingController){
this.text = JSON.parse(localStorage.getItem('app_text'));
}
ngOnInit()
{
}
ionViewWillEnter()
{
this.setUIBackButtonAction();
if(localStorage.getItem('user_id') && localStorage.getItem('user_id')!=null && localStorage.getItem('user_id')!="null"){
this.nav.back();
}
}
async login(data)
{
const loading = await this.loadingController.create({
message: 'Merci de patienter...',
});
await loading.present();
this.server.login(data).subscribe((response:any) => {
if(response.msg != "done")
{
loading.dismiss();
this.presentToast(response.msg);
}
else
{
localStorage.setItem('user_id',response.user_id);
this.events.publish('user_login', response.user_id);
this.nav.back();
}
loading.dismiss();
});
}
setUIBackButtonAction() {
this.backButton.onClick = () => {
console.log('login press button');
if(this.canBack){
console.log('login can press button');
this.canBack = 0;
this.nav.back();
}
}
this.platform.backButton.subscribeWithPriority(2, () => {
if(this.canBack){
this.canBack = 0;
this.nav.back();
}
});
}
}
As weird as it is, the back function I call when the user log in works just fine! But if he doesn’t log in and chosse to press the back button (the hardware android back button as well), it goes back to the home page quickly and then goes to the previous page I am looking for (the cart page) but with what seems to be a navigateRoot because after that, the user is stuck on the cart page with no way to go back…
I am really sorry for my english and if I am not clear enough. Thank you very much for reading me and I will be more than pleased to give more info if it’s necessary.
P.S. : the canBack variable is used to prevent multiple press on the back button because the app was going crazy when a user was spaming the back button…
P.S.S. : I also tried to make it work with the pop function but nothing different…