Вкладки Ionic2 после выхода из системы все еще отображаются на странице навигации, что я здесь пропустил?

Question

Вот то, чего я пытаюсь достичь, я уже захожу в приложение, но когда я выхожу, вкладка все еще там, пока я не обновлю свою страницу на экране входа в систему, я хочу, чтобы она исчезла с экрана входа в систему, когда я выхожу, как, что я пропустил здесь? Вот что я делаю:

мой 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();
    });
  }
}

ниже мои вкладки.

export class TabsPage {

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

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

}

тогда вот мой tabs.html:

когда я это делаю, при первой загрузке это выглядит нормально, вкладки не отображаются. Затем, после того, как я вошел в систему, я установил

this.navCtrl.setRoot(TabsPage);

вот мой код выхода из системы:

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

там я уже установил Root в мой LoginPagePage, почему все еще вкладка появляется на экране? как это исправить?

Answer 1

Я нашел решение, что мне нужно получить доступ к функции.getRootNav(), я не знаю, почему setRoot, который я импортирую из NavController, не работает, чтобы очистить вкладку. но я где-то читал (я забыл блог), я должен использовать приложение, вот как я это делаю. Я делаю импорт "App" из ионно-угловых:

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

Затем я получаю доступ к.getRootNav(), как мой код ниже:

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

затем я перехожу на страницу входа, на которой больше не отображается вкладка

Answer 2

Вы можете сделать что-то вроде этого, я не уверен, может быть, это будет работать

сделай свой

this.navCtrl.setRoot(LoginPagePage);

к этому

    this.navCtrl.push(LoginPagePage);

    or 

    this.navCtrl.pop();

внутри страницы входа удалите часть заголовка

а затем в вашем файле app.module.ts

убедитесь, что скрыли 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: []
})

для получения дополнительной информации посмотрите на эту страницу http://ionicframework.com/docs/v2/api/config/Config/

Answer 3

Просто оставив это здесь для потомков. Эта функция выхода из системы, кажется, работает для меня без каких-либо побочных эффектов. Благодаря @uiktiomasfeliz github-ссылка.

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

Answer 4

Вы, кажется, используете разные ключи для пользовательских данных в localStorage - 'user' и 'currentUser' Ваша функция выхода из системы удаляет элемент 'user'. Вы проверяете пункт 'currentUser' при настройке вкладок.

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

Вам нужно будет проверить, какой именно ключ. Обновление: localStorage обычно возвращает обещание, а не сам элемент. Вам необходимо проверить тип возврата. Если так: вы должны делать

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