ionic-frameworksplash-screenionic5angular14

Ionic Splashscreen


I'm relatively new to Ionic and have a query regarding managing a login-related issue. In typical application flow, after the initial login, it's common to redirect the user to the home screen following the splash screen.

I'm seeking guidance on how to implement this in Ionic, particularly using the default splash screen provided by the framework. Should I create a distinct component for the splash screen, or is it possible to incorporate logic within the default Ionic splash screen to determine if the user is already signed in? I appreciate any professional insights or best practices regarding this matter.


Solution

  • Splash screen usually is triggered on the native part at the beginning of the application, and after the splash screen finish it should be handled from your side.. By default the application redirect to the default page in router file:

    [
      {
        path: '',
        redirectTo: 'login',
        pathMatch: 'full',
      },
      {
        path: 'login',
        loadComponent: () => import('./login/login.page').then((m) => m.LoginPage),
      },
      {
        path: 'home',
        loadComponent: () => import('./home/home.page').then((m) => m.HomePage),
      },
    ]
    

    So application in that case will always redirect to the login since redirectTo is set to login..

    In that case, you can add a guard to login checking for specific criteria, and then redirect the user to home if conditions match..

    The second approach is creating a loading page and handling the conditions there:

     [
          {
            path: '',
            redirectTo: 'loading',
            pathMatch: 'full',
          },
          {
            path: 'loading',
            loadComponent: () => import('./loading/loading.page').then((m) => m.LoadingPage),
          },
          {
            path: 'login',
            loadComponent: () => import('./login/login.page').then((m) => m.LoginPage),
          },
          {
            path: 'home',
            loadComponent: () => import('./home/home.page').then((m) => m.HomePage),
          },
    ]
    

    Now inside the html part you can display a spinner or any loading style you would like, and inside the ngOnInit you can set your logic, if not logged in then redirect to login page, else redirect to home.. and for sure you will still need to add guard for home to check if user is logged in since if app was launched from web, then people can't bypass loading and head directly to home...