title: Load home page as landing page user Id stored in local storage
body: <p>In my ionic app(v-4), After <strong>login</strong> i am storing the <code>user_id</code> in the <code>local storage</code> like this:</p>
  
  <pre><code>onLogin(){
   localStorage.setItem('user_id',  this.loginForm.user_id);
  }
  </code></pre>
  
  <ul>
  <li><p>And i have made <code>login page</code> as <code>landing page</code>, After <code>login page</code> the user will be routed <code>home page</code>. This routing is working fine.</p></li>
  <li><p>But again if the user opens the <code>app</code> It should show <code>home page</code> as landing page since the app already stored the <code>user_id</code> in its <code>local storage</code>.</p></li>
  </ul>
  
  <p><strong>CODE</strong></p>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;ion-router-outlet main&gt;&lt;/ion-router-outlet&gt;
  </code></pre>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  import { Platform } from '@ionic/angular';
  import { SplashScreen } from '@ionic-native/splash-screen/ngx';
  import { StatusBar } from '@ionic-native/status-bar/ngx';
  
  @Component({
    selector: 'app-root',
    templateUrl: 'app.component.html'
  })
  export class AppComponent {
  
    constructor(
      private platform: Platform,
      private splashScreen: SplashScreen,
      private statusBar: StatusBar
    ) {
      this.initializeApp();
    }
  
    initializeApp() {
      this.platform.ready().then(() =&gt; {
        this.statusBar.styleDefault();
      });
    }
  }
  </code></pre>
  
  <p><strong>app.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { RouteReuseStrategy } from '@angular/router';
  
  import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
  import { SplashScreen } from '@ionic-native/splash-screen/ngx';
  import { StatusBar } from '@ionic-native/status-bar/ngx';
  import { AppComponent } from './app.component';
  import { AppRoutingModule } from './app-routing.module';
  import { HttpClientModule } from '@angular/common/http';
  import { HttpModule } from '@angular/http';
  
  import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  @NgModule({
    declarations: [AppComponent],
    entryComponents: [],
    imports: [
      BrowserModule,
      IonicModule.forRoot(),
      AppRoutingModule,
      HttpModule,
      HttpClientModule,
      FormsModule,
      ReactiveFormsModule ,
    ],
    providers: [
      StatusBar,
      SplashScreen,
      { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <p><strong>app.routing.module.ts</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
  
  const routes: Routes = [
    {
      path: '',
      redirectTo: 'login',
      pathMatch: 'full'
    },
    {
      path: 'home',
      loadChildren: './home/home.module#HomePageModule'
    },
    { path: 'login', loadChildren: './login/login.module#LoginPageModule' },
    { path: 'my-profile', loadChildren: './my-profile/my-profile.module#MyProfilePageModule' },
    { path: 'appointments', loadChildren: './appointments/appointments.module#AppointmentsPageModule' },
    { path: 'request-acceptance', loadChildren: './request-acceptance/request-acceptance.module#RequestAcceptancePageModule' },
  ];
  
  @NgModule({
    imports: [
      RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
    ],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>I found this similar <strong><a href="https://stackoverflow.com/questions/43377594/ionic-2-auth-skip-login-page-if-theres-an-user-on-local-storage">question</a></strong> but i am unable to do it my app.</p>