Ionic2 Tabs after logout still showed up in navigation page, what i missed here?

Question

Here is what i trying to achieve, i already log in into my aplication, but when i logout, the tab is still there until i refresh my page in my login screen, i want it gone from my login screen when i logout how, what i missed here? Here is what i do :

my app.component.ts :

export class MyApp {
  public rootPage: any = TabsPage;

  constructor(platform: Platform) {

    if (localStorage.getItem("currentUser") === null) {
      console.log("not logged in");
        this.rootPage = LoginPagePage;
    } else {
      console.log("already logged in");
        this.rootPage = TabsPage;
    }

    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.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
}

below is my tabs.ts :

export class TabsPage {

  public tab1Root: any;
  public tab2Root: any;
  public tab3Root: any;

  constructor() {
    this.tab1Root = HomePage;
    this.tab2Root = AboutPage;
    this.tab3Root = ExplorePage;
  }

}

then here is my tabs.html :

when i do that, it appear normal when first load, the tabs doesn't show up. Then after i logged in, i do set

this.navCtrl.setRoot(TabsPage);

here is my logout code :

  logout(){
    localStorage.removeItem("currentUser");
    this.navCtrl.setRoot(LoginPagePage);
  }

there i already setRoot into my LoginPagePage, why still the tab appear on the screen? how to fix this?

score 18 · Accepted Answer · edited Feb 22 '21 at 14:38

18

I found the solution. I have to access.getRootNav() function. I don't know, why the setRoot that I import from NavController is not working to clear the tab. But I read somewhere (I forgot where), that I have to use App. So here is how I do it. I do import "App" from ionic-angular:

import { NavController, App } from 'ionic-angular';

then I access the .getRootNav(), just like my code below:

  logout(){
    localStorage.removeItem("currentUser");
    this._app.getRootNav().setRoot(LoginPagePage);
  }

Then I navigate to my login page, it won't show the tab any more.

edited Feb 22 '21 at 14:38

peterh

11,875
18
85
108

answered Dec 10 '16 at 05:51

Ke Vin

3,478
11
60
91

what is `App` and ` this._app.getRootNav()` you have used i am not understanding – Mohan Gopi Dec 10 '16 at 06:04
here is the blog that i read http://blog.tangdian.ca/how-to-get-rootnav-in-ionic-2/ – Ke Vin Dec 10 '16 at 06:46
i understood thanks for the info glad you found an solution – Mohan Gopi Dec 10 '16 at 07:09
@MohanGopi this._app comes from the constructor ( constructor (public navCtrl: NavController, public _app: App, ... ). Then you are able to use this._app.getRootNav().setRoot(YOURPAGE); – Jibeee May 30 '17 at 08:11
Worked for me. Thanks you! – 0bj3ct Jul 17 '17 at 04:27
Worked for me as well. Thank you very much. – Michael.D Jul 20 '17 at 12:23
i did the same this._app.getRootNav().setRoot(LoginPagePage); but not work for me, still the tab from the first page appear for seconds in the second page – Joe Sleiman Oct 17 '18 at 08:58

Suraj Rao · Answer 2 · 2016-12-08T13:13:57.250

0

You seem to be using different keys for user data in localStorage - 'user' and 'currentUser' Your logout function is removing item 'user'. You are checking for item 'currentUser' while setting tabs.

    if (localStorage.getItem("currentUser") === null) {
  console.log("not logged in");
    this.rootPage = LoginPagePage;
} else {
  console.log("already logged in");
    this.rootPage = TabsPage;
}

You will have to check which is the actual key. Update: localStorage generally returns a promise not the item itself. You need to check the return type. If so : You should be doing

localStorage.getItem("currentUser").then(data=>{
        if (data === null) {
      console.log("not logged in");
        this.rootPage = LoginPagePage;
    } else {
      console.log("already logged in");
        this.rootPage = TabsPage;
    }
});

edited Dec 08 '16 at 13:13

answered Dec 07 '16 at 10:58

Suraj Rao

29,388
11
94
103

i don't get what you mean, i already added it in my app.component.ts, if i add this.rootpage = loginpagepage to my login page constructor, i will get a forever looping – Ke Vin Dec 08 '16 at 03:55
sorry if wasnt clear.. i meant the key of user in localstorage..you have 2 different keys for user..1 at logout page and another while setting root page – Suraj Rao Dec 08 '16 at 03:58
oh sorry, already rename it, but it's not affect the tabs i want it gone after logout, the tab still showing on my login screen after logout – Ke Vin Dec 08 '16 at 04:26
which is the localstorage you are using? – Suraj Rao Dec 08 '16 at 13:05
i am using currentUser key, anyway it's not about the localstorage, i found the solution, check my own answer – Ke Vin Dec 10 '16 at 05:52

score 0 · Answer 3 · answered Dec 07 '16 at 11:04

0

you can do something like this i am not sure may be it will work

make your

this.navCtrl.setRoot(LoginPagePage);

to this

    this.navCtrl.push(LoginPagePage);

    or 

    this.navCtrl.pop();

inside your login page remove your header part

and then in your app.module.ts file

make sure hide the tabsHideOnSubPages=true

import { IonicApp, IonicModule } from 'ionic-angular';

@NgModule({
  declarations: [ MyApp ],
  imports: [
    IonicModule.forRoot(MyApp, {
      // Configs for your app
      tabsHideOnSubPages: true
      // ...
    }, {}
  )],
  bootstrap: [IonicApp],
  entryComponents: [ MyApp ],
  providers: []
})

for more information take a look at this page http://ionicframework.com/docs/v2/api/config/Config/

answered Dec 07 '16 at 11:04

Mohan Gopi

7,606
17
66
117

i use this code this.navCtrl.push(LoginPagePage); it work but it have back button showing up and when we push the back button on the android os button, i can keep going back to the page that shouldn't access without login – Ke Vin Dec 08 '16 at 03:18
*ps : i added tabsHideOnSubPages: true then i use this code this.navCtrl.push(LoginPagePage); when logged out – Ke Vin Dec 08 '16 at 03:18
as you can see i have already told to remove the header part of your login page place only `` – Mohan Gopi Dec 08 '16 at 05:14
you can try using an overlay check this link https://ionicframework.com/docs/v2/api/components/modal/ModalController/, and also check in the officail website you can check the navcontrall api they have given about tabs – Mohan Gopi Dec 08 '16 at 05:30
thank you @mohan gopi, i found the solution, check my answer :) – Ke Vin Dec 10 '16 at 05:52

score 0 · Answer 4 · answered Apr 15 '18 at 19:45

Just leaving this here for posterity. This logout function seems to be working for me without any side-effects. Thanks to @uiktiomasfeliz github-link.

cli packages: (/usr/local / lib / node_modules)

@ionic / cli - utils: 1.19 .2
ionic(Ionic CLI): 3.20 .0
global packages:

  cordova(Cordova CLI): 7.1 .0
local packages:

  @ionic / app - scripts: 3.1 .2
Cordova Platforms: android 6.3 .0 ios 4.5 .4
Ionic Framework: ionic - angular 3.9 .2
System:

  ios - deploy: 1.9 .2
Node: v8 .9 .1
npm: 5.7 .1
OS: macOS High Sierra
Xcode: Xcode 9.3 Build version 9E145

async logOut() {
  await this.authProvider.logout();
  await this.app.getRootNav().setRoot('LoginPage');
}

Ionic2 Tabs after logout still showed up in navigation page, what i missed here?

4 Answers4