注销后的 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();
    });
  }
}

下面是我的 tabs.ts :

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

我已经在我的LoginPagePage中设置了Root，为什么标签页仍然出现在屏幕上？如何解决这个问题？

Answer 1

您似乎对 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 通常 return 是一个承诺，而不是项目本身。您需要检查 return 类型。如果是这样：你应该做

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

Answer 2

你可以做这样的事情我不确定它是否有效

让你的

this.navCtrl.setRoot(LoginPagePage);

至此

    this.navCtrl.push(LoginPagePage);

    or 

    this.navCtrl.pop();

inside your login page remove your header part

然后在您的 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

我找到了解决方案。我必须 access.getRootNav() 功能。我不知道，为什么我从 NavController 导入的 setRoot 无法清除选项卡。但是我在某处（我忘了在哪里）读到，我必须使用 App。所以这就是我的做法。我确实从 ionic-angular:

导入“App”

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

然后我访问 .getRootNav()，就像我下面的代码一样：

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

然后我导航到我的登录页面，它不再显示该选项卡。

Answer 4

留在这里留给子孙后代。这个注销功能似乎对我有用，没有任何副作用。感谢@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 选项卡仍显示在导航页面中，我在这里错过了什么？

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

tabs

ionic-framework

ionic2

ionic-tabs

angular