How to restrict state change handling using ionic?

Ionic Framework ionic-v3
1

Scenario.

Application has presignon and post signon pages.

In post signon, there is a functionality which has Step 1 , Step 2 and Step 3.

Requirement:
From menu, User always landed on Step 1.
Once user filled and submit the form then only application allows user to navigate to Step2,
Once confirmed on Step2 and Submit than navigate to Step 3

If user manually enter the URL to Step2 or Step3, then also application doesnt allow user to land on Step2 or Step 3.

If User click the browser back button on step3 then user lands on Step1.

I want to implement the above scenario in my app.

Is there any way to implement using ionic 3?

I have already tried the above scenario using ionic lifecycle hooks. but didnt achieve the goal.

Thanks

2

Any suggestions please?

3

All posts I’ve read related to what you’re suggesting say no, this isn’t possible with Ionic. What you’re proposing could be done using angular routing (based on my limited experience writing angular routing modules).

But angular routing modules are limited to pure angular projects. Not applicable to Ionic.

4

ionViewCanEnter is a place to start.

5

Something like this, though, is an impossibility in Ionic though, is it not?

Wouldn’t that require angular type router outlets?

Edit: angular router redirect?

6

Ehhhhh, I believe you are correct and it is impossible. But it it is supposed to be possible. It’s just that the guards don’t guard very well. Or didn’t. I literally haven’t tried to use them in a year. Maybe with the focus on PWA, the code has improved or soon will. But I’m not going to be the first to find out.

7

Nor will you be the second to find out. Angular’s AuthGuard system doesn’t seem to be a thing that can be mimicked in Ionic.

It does, however, seem like a thing that would consume my time and energy to an unhealthy degree if I tried applying it to an ionic project. Ultimately ending in failure.

And what you found a year ago seems true today. Ionic’s guards are not terribly effective unless used in simple cases

8

Is there anything similar to ionic V1 $statechangehandler, so that I can read the state and handle the above scenario.

9

It’s easy to maintain a global state in a provider and to restrict data. We’re only talking about an ugly flicker in the user interface, not about seeing the wrong data. You can put an auth gate in any of your getters or observables in your provider, or in the security rules of your backend if you have one. Just decouple data manipulation from data rendering. Then any weakness in the page guard will have no effect on your data security. If your page is a container for data and your provider is a provider of data, then your provider can dispense the data only if it knows conditions are met.

10

Thanks Aaron I will try this solution.