Route guards

[jgw96]

Ive gotten asked a few times about how to do route guards in the Stencil router. Just to be clear, by route guards i mean blocking transition to a route based on some condition. If that condition === true, navigate, if not , dont navigate. After talking to Josh it sounds like we have an API for this, but it does not have an external interface to that API. The purpose of this issue is to track adding an external interface for that API.

[MoAsmar]

any updates regarding this issue? I am facing a lot of bad experience do to that issue, I have to do some checks before loading the router, now I had to do it inside the componentWillLoad method which breaks the navigation.

[jthoms1]

@MoAsmar Can you provide more detail on the experience? What is it exactly you would like to accomplish. It is possible there might be another mechanism that would work.

[MoAsmar]

I want to call an API before routing, get the response and check for a condition to specify whether I want to redirect to a route or to another route or stay at the same route, same as CanActivate Guard from Angular.

Note that doing this while loading the component means that I am already in a route in the browser history.

[jthoms1]

Makes sense. Thanks! I will hopefully be completing this in the next couple weeks.

[MoAsmar]

Any updates regarding this issue ?

[jthoms1]

I created a Prompt component ala react router. That should accomplish the before leave route guard. An example of this can be seen here. https://github.com/ionic-team/stencil-router/blob/master/packages/demo/src/components/test-route-guard.tsx#L22

I haven't had time to write proper docs yet, but I hope that you will be able to give it a try. Thanks!

[MoAsmar]

I didn't get it, its just an alert window inside a component, can you give me an explanation of it please. Because I what I wanted to have is a guard that passed as property on the route definition itself like the below: so when the user navigates to route called for example '/test-route' a method (isAuthenticated) is called and check the user identity authentication, if he is not authenticated > I redirect him from inside the method to a signup page, else > I let him access the route.

The purpose of this is to prevent adding unwanted routes to the browser history, so the '/test-route' is not accessed at all so its not in the history, so when I click back it doesn't take me to it. I hope that you understand my point.

[val-o]

@MoAsmar for your last case, you need to check privateRoute example. As I understand @jthoms1 means different thing by route guard.

[daftclaud]

Can we please get a follow up on this issue? I'm currently checking for authentication in componentWillLoad, but as @MoAsmar mentioned we are already inside the route we want to prevent navigation to.

[MoAsmar]

@jthoms1 We need something like this, Angular CanActivate