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

我已经将setRoot设置为我的LoginPagePage，为什么屏幕上仍会出现标签？如何解决这个问题？

Answer 1

我找到了解决方案，我必须访问.getRootNav（）函数，我不知道为什么我从NavController导入的setRoot无法清除标签。但我在某处读到（我忘记了博客）我必须使用App，所以这就是我如何做到的。我做导入＆＃34; App＆＃34;来自离子角：

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

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

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

然后我导航到我的登录页面，它不再显示标签

Answer 2

您似乎在localStorage中使用不同的密钥用于用户数据 - 'user'和'currentUser' 您的注销功能正在删除“用户”项。您正在设置标签时检查项目'currentUser'。

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

您必须检查哪个是实际密钥。更新： localStorage通常返回一个promise而不是item本身。您需要检查返回类型。如果是这样：你应该做的

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 3

你可以做这样的事情我不确定它是否会起作用

制作你的

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 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选项卡仍显示在导航页面中，我错过了什么？

4 个答案: