2 Different Menu Ionic

Issue

I have 2 different menus for 2 different users, but when I logout and change accounts it keeps the old menu loaded and doesn’t change it to the new one.

This is the login page where I get data from the user:

export class authPage {

    resposeData: any;
    cin: number;
    emeil: String;
    result = <any[]>[];
    data: any;
    activeMenu: string;

    constructor(public navCtrl: NavController, public authService: AuthService, private toastCtrl: ToastController, public menu: MenuController, private alertCtrl: AlertController) {

        //this.menu.enable(false,'appMenuItems');
        this.menu.enable(false);
    }

    ionViewDidLoad() {

        if (localStorage.getItem('id_en') !== null) {
            this.navCtrl.setRoot(NouveauxPubPage);
            this.menu.enable(true);

        }else if(localStorage.getItem('cin') !== null) {
            this.navCtrl.setRoot(HomePage);
            this.menu.enable(true);
        }

        console.log('ionViewDidLoad Login');
    }
    login() {
        console.log(this.cin, this.emeil);
        if (this.cin && this.emeil) {
            this.authService.auth(this.cin, this.emeil)
                .subscribe((data) => {
                       this.result = data;
                    if (this.result[1] == "enseignant") {
                        this.navCtrl.setRoot(NouveauxPubPage);
                        localStorage.setItem('id_en', data[0][0].id_en);
                        localStorage.setItem('type', 'enseignant');
                        this.menu.enable(true);
                    }
                    else if (this.result[1] == "etudiant") {
                        this.navCtrl.setRoot(HomePage);
                        localStorage.setItem('cin', data[0][0].cin);
                        localStorage.setItem('type', 'etudiant');
                        this.menu.enable(true);

                    }
                    else {
                        let alert = this.alertCtrl.create({
                            title: 'Erreur connexion',
                            subTitle: "l'identifiant ou le mot de pass ne sont pas correcte",
                            buttons: ['Ok']
                        });
                        alert.present();
                        console.log('error');
                    }
                }, (err) => {
                    let alert = this.alertCtrl.create({
                        title: 'Erreur Serveur',
                        subTitle: "Verifier votre internet",
                        buttons: ['Ok']
                    });
                    alert.present();
                    console.log('error');
                });
        }
    }

    presentToast(msg) {
        let toast = this.toastCtrl.create({
            message: msg,
            duration: 2000
        });
        toast.present();
    }

}

this is the App Component which contain the menu and everything about the app

export class MyApp {
    @ViewChild(Nav) nav: Nav;


    rootPage: any = authPage;
    appMenuItems: Array<MenuItem>;

    helpMenuItems: Array<MenuItem>;

    type: string;
    cin: any;
    id_en: any;

    pages: Array<{ title: string, component: any, icon: string }>;

    constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen, private app: App) {
        this.initializeApp();
    }

    initializeApp() {
        this.platform.ready().then(() => {
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
            if (localStorage.getItem('cin') !== null) {
                this.cin = localStorage.getItem('cin')
                console.log('cin:' + this.cin)
                this.type = localStorage.getItem('type');
                console.log(this.type)
                this.statusBar.styleDefault();
                this.splashScreen.hide();
            }
            else if (localStorage.getItem('id_en') !== null) {
                this.id_en = localStorage.getItem('id_en');
                console.log('id_en:' + this.cin)
                this.type = localStorage.getItem('type');
                this.statusBar.styleDefault();
                this.splashScreen.hide();
            }
            else {
                this.statusBar.styleDefault();
                this.splashScreen.hide();
            }
            if (localStorage.getItem('id_en') !== null) {
                this.appMenuItems = [
                    {title: 'Nouveaux Annonces', component: NouveauxPubPage, icon: 'md-create'},
                    {title: 'Mes Annonces', component: HomeePage, icon: 'md-list-box'},
                    {title: 'Mes Etudiant', component: EtudiantPage, icon: 'ios-contacts'},
                    {title: 'Historique', component: HistoriquePage, icon: 'ios-undo'},
                    {title: 'A propos', component: exemplePage, icon: 'information-circle'},
                ];
            } else {
                // used for an example of ngFor and navigation
                this.appMenuItems = [
                    {title: 'Accueil', component: HomePage, icon: "md-home"},
                    {title: 'Stages', component: stagesPage, icon: "md-attach"},
                    {title: 'Nouveaux article', component: ETarticlePage, icon: "md-create"},
                    {title: 'Mes Articles', component: mesarticlePage, icon: "md-list-box"},
                    {title: 'Annonce', component: ETpubPage, icon: "md-clipboard"},
                    {title: 'Historique', component: EThistoriquePage, icon: "ios-undo"},
                    {title: 'Stage en cours', component: stage_en_courPage, icon: "md-alarm"},
                    {title: 'A propos', component: exemplePage, icon: 'information-circle'},
                ];
            }
        });
    }

    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);

    }

    deconnexionetudiant() {
        localStorage.removeItem('cin');
        localStorage.removeItem('id_en');
        localStorage.removeItem('type');
        this.nav.setRoot(authPage);
        window.location.reload();
    }

I’ll be so grateful if any one can help

Solution

You need to refresh the menu. Whenever the users logs in try calling an event inside the app.component.ts.

events.subscribe("child:login", () => {
    //REFRESH THE MNU
})

So from auth.ts, something like this.

login() {
  this.events.publish("child:login");
}

Answered By – Missak Boyajian

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0