ionic-frameworkionic5ion-slideswalkthroughapp-router

How to change the app route path if a page (walkthrough) has been view once


I have app walkthrough / intro built using ion-slides which is loaded as the default page in app.routing.module.ts .

{
    path: '',
    redirectTo: 'walkthrough',
    pathMatch: 'full'
  },{
    path: 'walkthrough',
    loadChildren: () => import('./walkthrough/walkthrough.module').then(m => m.WalkthroughPageModule)
  }

I only want to show this the first time the app is launched, so my question is how do I configure the app-route in the app-routing module to set the opening page just once? I read the documentation and could not find a reference.


Solution

  • For anyone in a similar situation you can add conditionals / user logic using angular route gaurds. In the Walkthrough.ts module I set the value to storage:

    ngOnInit(): void {
        // save key to mark the walkthrough as visited so the next time the user vistis the app, he would be redirected to log in
        Storage.set({
          key: 'visitedWalkthrough',
          value: 'true'
        });
      }
    

    In a walkthrough.gaurd.ts I check for same value and change the route based on same:

    const { Storage } = Plugins;
    
    @Injectable()
    export class WalkthroughGuard implements CanActivate {
      constructor(private router: Router) {}
    
      async canActivate(): Promise<boolean> {
        const { value } = await Storage.get({ key: 'visitedWalkthrough' });
    
        if (value === 'true') {
          // this is a returning user, don't show him the walkthrough
          this.router.navigate(['auth']);
          return false;
    
        } else return true;
      }
    }
    

    Good tutorial here :