Search code examples
ionic-frameworkionic3

Ionic 3. Problems with NavController. It stops working correctly when I logout

I have an Ionic app with login/registration + validation and a home with a couple of views. The structure can be something like this:

Views structure:

enter image description here

I don’t have any problem moving through the app until I use the logout. When that happens when I register, I get to the validation page and when I get the response with the OK from the server I don’t get redirected to the home page. I also get a double back button in my stacked views.

Maybe I am not cleaning something the right way. I don’t get any error, just everything stops working the right way. Can anybody help me with this problem?

Right now I am using Ionic 3.19.1. Just ask away if you need some more information.

This is my logout and the view that contains it:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController, App } from 'ionic-angular';
import { WebSocketServiceProvider } from '../../providers/websocket-service/websocket-service';

@IonicPage()
@Component({
    selector: 'page-home-popover',
    templateUrl: 'home-popover.html',
})
export class HomePopoverPage {

    constructor(public navCtrl: NavController, public navParams: NavParams, public viewCtrl: ViewController,
        public appCtrl: App, public websocketService : WebSocketServiceProvider, public app: App) {
    }

    ionViewDidLoad() { }

    closeMenu() {
        this.viewCtrl.dismiss();
    }

    options(tab) {
        this.closeMenu();
        this.navCtrl.push('OptionsTabsPage', tab);
    }

    logout() {
        localStorage.clear();
        this.websocketService.close();
        this.closeMenu();
        let rootNav = this.app.getRootNav();
        rootNav.setRoot('LoginPage');
    }
}

sms-validation.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, AlertController, App } from 'ionic-angular';
import { AuthServiceProvider } from '../../providers/auth-service/auth-service';
import { NavParams } from 'ionic-angular/navigation/nav-params';

@IonicPage()
@Component({
    selector: 'page-sms-validation',
    templateUrl: 'sms-validation.html',
})
export class SmsValidationPage {

    validated = false;
    validationCode: '';
    nickname: '';

    constructor(private navCtrl: NavController, private auth: AuthServiceProvider, public alertCtrl: AlertController,
        public navParams: NavParams, public app: App) {
        this.nickname = navParams.get('nickname');
    }

    public smsValidation() {
        this.auth.validateCode(this.nickname, this.validationCode).subscribe(response => {
            console.log('validateCode response', response);
            if (response.status) {
                this.validated = true;
                console.log('Validated', this.validated);
                localStorage.setItem("nickname", this.nickname);
                this.navCtrl.setRoot('HomePage');
                //this.showPopup("Success", "Account validated.");
            } else {
                this.showPopup("Error", "Problem validating account. " + response.message);
            }
        },
        error => {
            console.log('Error', error);
            //this.showPopup("Error", error.message);
        });
    }

    showPopup(title, text) {
        console.log('showPopup', title, text, this.validated);
        let alert = this.alertCtrl.create({
            title: title,
            subTitle: text,
            buttons: [
                {
                    text: 'OK',
                    handler: data => {
                        if (this.validated) {
                            this.navCtrl.setRoot('HomePage');
                        }
                    }
                }
            ]
        });
        alert.present();
    }


    ionViewDidLoad() { }

}

app.html

<ion-nav [root]="rootPage"></ion-nav>
Solution

  • I think you have to push your login page to the Nav component of the root app. Your logout function should be:

    logout() {

    localStorage.clear();

    this.websocketService.close();
    this.close(); // --> I suppose you know what you are doing here

    let rootNav = this.app.getRootNav();
    rootNav.setRoot('LoginPage');

}