Splash, Login/Signup then SideMenu Screen

I want to know how to achieve a normal android/iOS app heirarchy. Like

  • Splash
  • Login/Signup (no side menu here)
  • SideMenu Page

Is there a sample app that demonstrates it. I have seen samples which starts with sidemenu page and it also shows side menu on login and sign up page. I want my user to access my app only after login or signup. Any guidance please.

you can just type this sort of question in google and you will have a plenty of examples…

Hey @asadwaheed, actually @FnnHuman is right. This is just to give you some guidance about how to achieve it: create a new page call it “login” if you want, and in “app.component.ts” you will check if the person is logged set “home” as root, if not then set “login” as root which will lead you to login page anytim the user is not authenticate. don’t forget to set the “home” like root after performing logging. Know that you can give to your pages names at your convenience.
Feel free to ask if you have some more questions.

1 Like

Creating something similar now. I can share some of my code:

app.component.ts

@Component({
  template: `<ion-nav #root [root]="rootPage"></ion-nav>`
})
export class exampleApp {
  constructor() {
    this.checkLogin();
  }
  checkLogin() {
    this.user.checkLogin()
      .map(res => res.json())
      .subscribe(res => {
        if (res.success)
          this.rootPage = 'MenuPage';
        else
          this.rootPage = 'LoginPage';
        this.splashScreen.hide();
      }, err => {
        this.rootPage = 'LoginPage';
        this.splashScreen.hide();
        //console.error('ERROR', err);
      });
  }
}

menu.html

<ion-split-pane>
  <ion-menu [content]="content">
    <ion-list>
    	<ion-item *ngFor="let p of pages" menuClose detail-none (click)="openPage(p)">
	    	<ion-icon name="{{p.icon}}" item-start></ion-icon>
        {{p.title}}
      </ion-item>
      <ion-item menuClose detail-none (click)="showLogoutAlert()">
	      <ion-icon name="log-out" item-start></ion-icon>
        {{ 'PAGE_LOGOUT' | translate }}
      </ion-item>
    </ion-list>
  </ion-menu>

  <ion-nav #content main [root]="rootPage"></ion-nav>
</ion-split-pane>

menu.ts

export class MenuPage {
  constructor() {
    this.events.subscribe('user:noauth', () => {
          console.log('noauth event catched');
          this.navCtrl.setRoot('LoginPage'); 
        });
}
1 Like

Ionic Conference app is good example for the same you are looking, go through code and logic :

1 Like