Ionic 2 - Logout Tab in Sidemenu

2
votes

How can I add a Logout Tab in my ionic 2 sidemenu? If you are logged in you are on the DashboardPage. Right now I have a menu item "Logout" which just bring me to the HomePage. Here is the pages array in the app.component.ts with all menu items:

this.pages = [
    {title: 'Dashboard', component: DashboardPage},
    ...
    {title: 'Logout', component: HomePage}
];

But now I need to add logic behind the logout and not only a page switch. Is it possible to call a function logout() when I click on the Logout Tab instead of only go to HomePage?

EDIT:

Here is the openPage function:

openPage(page) {
    this.nav.setRoot(page.component);
}
2
angulartypescriptionic-frameworkionic2ionic3
Could you please add the method that handles when an option of the side menu is selected? – sebaferreras
@sebaferreras done – Nono
why not do a check on the page title in openPage: if (page.title === 'Logout') { // Do logout stuff here } else {this.nav.setRoot(page.component); } – Michael Doye

2 Answers

10
votes

You can set the component as null in the logout option 

this.pages = [
    {title: 'Dashboard', component: DashboardPage},
    ...
    {title: 'Logout', component: null}
];

And then in your method:

openPage(page) {
    if(page.component) {
        this.nav.setRoot(page.component);
    } else {
        // Since the component is null, this is the logout option
        // ...

        // logout logic
        // ...

        // redirect to home
        this.nav.setRoot(HomePage);
    }
}
0
votes

I know this has been answered, but anyone could find this useful.

    this.pages = [
        {title: 'Dashboard', component: DashboardPage},
        {title: 'Logout', component: HomePage},
        {title: 'Share', component: ''}
    ];

    openPage(page) {

        switch (true) {

          case ((page.title == 'Logout')): {
            console.log('Clicked Logout button');
            // this.logout(); // call logout logic method
          }
              break;

          case ((page.title == 'Share')): {
            console.log('Clicked Share button');
            // this.share(); call share logic method
          }
              break;

          default: {
            this.nav.setRoot(page.component);
          }
              break;
      }

    }