5

这是我试图实现的目标，我已经登录到我的应用程序，但是当我注销时，选项卡仍然存在，直到我在登录屏幕中刷新我的页面，我希望它在我注销时从我的登录屏幕消失 如何，什么我错过了这里？这是我所做的：

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

4

4 回答 4

18

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

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

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

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

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

于 2016-12-10T05:51:04.507 回答
0

您似乎对 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;
    }
});
于 2016-12-07T10:58:02.947 回答
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');
}
于 2018-04-15T19:45:58.580 回答
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/

于 2016-12-07T11:04:55.073 回答