0

Situation: I'm busy developing an online course where the user has to go through a series of pages in order, but I want to keep them from navigating to other pages. If they attempt to, the current page just loads again.

My idea: I created a public boolean array that keeps track of the users' progress (example below):

progress: [boolean, boolean, boolean] = [true, false, false];

End of Page 1:
progress[0] = false;
progress[1] = true;
End of Page 2:
progress[1] = false;
progress[2] = true;

My question is: How can I use the auth guard, canLoad, to prohibit the user from accessing any other pages based on the progress array?

I have a lot of pages and would love to perform the check using one Auth Gaurd and not create a guard for every page.

R. Richards
  • 24,603
  • 10
  • 64
  • 64
Pine van Wageningen
  • 23
  • 3
  • Maybe instead of boolean array in this way, use object for better understanding and working with indexes like { pageStatus : false } inside array ,and thus when you want to use guard, you can connect the array using findIndex(p => p.pageStatus === true) then activate the guard or don't resolve the page or whatever you need to achieve. – Mostafa Harb Jun 29 '20 at 14:37
  • Thanks for the idea Mostafa, I believe that would make things much easier to keep track of. I have a NEXT button at the end of each page that routes to the next - I realized that I only need one page accessible at a time (current page) so the button can disable the guard (that protects all pages) for a moment and then on ionViewWillEnter it is reactivated again. I appreciate your response. – Pine van Wageningen Jun 29 '20 at 16:48

2 Answers2

0

Hard to give you exact code, but below is somewhat naive how I would do it:

Inside a shared provider available to all your pages create an Object to track progress:

public progress: {
     pageRoutePathName1: boolean,
     pageRoutePathName2: boolean,
}

Basically object's properties should equal your route's path value

Then just update the state of the object's booleans similar to what you had in mind.

Import such shared provider into your load guard and leverage the object for canLoad method:

canLoad(route: Route, segments: UrlSegment[]): Promise<boolean> | boolean {

    if (this.sharedProvider.progress[route.path] === true) {
        return true
    } else {
        return false
    }

}
Sergey Rudenko
  • 8,809
  • 2
  • 24
  • 51
0

I found a thread that is in line with my problem. This answer worked for me - it toggles one boolean before and after navigation by button (prohibiting navigation my manual URL entry).

Pine van Wageningen
  • 23
  • 3