注销后Ionic2选项卡仍显示在导航页面中,我错过了什么?

时间:2016-12-07 10:50:44

标签: angular ionic-framework tabs ionic2 ionic-tabs

这是我想要实现的目标,我已经登录到我的应用程序,但是当我退出时,选项卡仍然存在,直到我在登录屏幕中刷新我的页面,我希望它在登录时从我的登录屏幕消失怎么样,我错过了什么?这是我做的:

我的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,为什么屏幕上仍会出现标签?如何解决这个问题?

4 个答案:

答案 0 :(得分:18)

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

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

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

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

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

答案 1 :(得分:0)

您似乎在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;
    }
});

答案 2 :(得分:0)

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

制作你的

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/

答案 3 :(得分:0)

离开这里为后代。这个注销功能对我来说似乎没有任何副作用。感谢@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');
}