CODEWITHSUNDEEP
androidangularcordovaionic-frameworkionic4
Abdu4
Abdu4

Reputation: 1558

How to conditionally set root page in ionic 4?

I'm working on ionic 4 application. when the user signs In, I added a checkbox to asks for Remember me, so the next time the user open the app it doesn't show the login page and directly forward the user to Home page. I have google and found this. However, while using the accepted solution, I encountered an issue, which it shows the login page for 2 or 3 seconds, then open the Home page. How I can safely achieve it without delay?

app.component.ts

import { SmsVerificationService } from 'src/app/services/SMS/sms-verification.service';
    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';
    import { FCM } from '@ionic-native/fcm/ngx';


    import { Plugins, Capacitor } from '@capacitor/core';
    import { Router } from '@angular/router';
    import { Storage } from '@ionic/storage';
    @Component({
      selector: 'app-root',
      templateUrl: 'app.component.html'
    })
    export class AppComponent {
      constructor(
        private platform: Platform,
        private splashScreen: SplashScreen,
        private statusBar: StatusBar,
        private fcm: FCM,
        private route: Router,
        private storage: Storage

      ) {



        this.initializeApp();
      }

      initializeApp() {

        this.platform.ready().then(() => {
          this.fcm.getToken().then(token => {
            console.log(' token is ', token);
          });
          this.fcm.onTokenRefresh().subscribe(token => {
            console.log('on token refresh ', token);
          });
          this.fcm.onNotification().subscribe(data => {
            console.log(data);
            if (data.wasTapped) {
              console.log('Received in background');
              // this.router.navigate([data.landing_page, data.price]);
            } else {
              console.log('Received in foreground');
              // this.router.navigate([data.landing_page, data.price]);
            }

          });
          this.storage.get('isLogined').then(data => {
                    if (data)
              this.route.navigateByUrl('/main-tab');
          })
          this.statusBar.styleDefault();
          this.splashScreen.hide();
          if (Capacitor.isPluginAvailable('SplashScreen')) {
            Plugins.SplashScreen.hide();
          }
        });
      }
    }

The codes that are supposed to change the page

this.storage.get('isLogined').then(data => {
                    if (data)
              this.route.navigateByUrl('/main-tab');
          })

Upvotes: 3

Views: 966

Answers (1)

Dániel Barta
Dániel Barta

Reputation: 1062

Do you have a separate login component? If so, you can create and add a guard to your login component to navigate to your main page when Remember me was checked.

Upvotes: 1

Related Questions