ionic3.x版本-实现点击tab导航栏判断是否已经登陆然后加载不同页面，和退出登录功能。

html代码：

<ion-tabs #myTabs>
  <ion-tab [root]="tab1Root" tabTitle="首页" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="商家" tabIcon="cart"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="我的" tabIcon="md-contact"></ion-tab>
  <div class="nav3" (click)="change()"></div>
</ion-tabs>

tabs跳转控制代码

@IonicPage()
@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {

  tab1Root = 'HomePage';
  tab2Root = 'StoreNearbyPage';
  tab3Root = 'MinePage';

  @ViewChild('myTabs') tabRef: Tabs;
  constructor(public navCtrl: NavController) {

  }

  change() {
    if (localStorage.getItem('token')) {
      this.tabRef.select(2);
    } else {
      this.navCtrl.push('LoginPage')
    }
  }
}

　就是在我的tab栏上加了一个透明块，点击透明块的时候如果已经登录调用tab组件的select方法，选中tab实现跳转配置页面。如果未登录就使用ionic的页面跳转。把登录页push进去。

   

    用户在我的tab栏下子页面退出登录，因为不能直接调用navCtrl.pop()方法返回我的页面。

　子页面退出方法

 

import {IonicPage, NavController, NavParams, Navbar, App, ViewController} from 'ionic-angular';

out() {
    this.common.$http('DELETE', '/logout')
      .subscribe(res => {
        localStorage.clear();
        this.appCtrl.getRootNav().push('TabsPage');
      })
  }

注入ionic-angular的APP模块。直接把tab页面丢回根导航。这样在其他tab下面的子页面退出的时候就能返回首页了。

可能描述的不太好。至说出了个大概处理的思路。有想法的童鞋可以留言指导