How to use Ionic Route Guards and Resolver [v4]

ionic-guards-resolver-angular

With Ionic 4 and the closer Angular integration we can now finally enjoy the benefits from using the Router and other functions you might already know from Angular directly inside our Ionic app.

In this Quick Win we will use Route Guards to protect certain routes of your application and also a Resolver which can perform operations before we actually enter a new page to provide all necessary information upfront.

In the end we will have a dummy app to test our functionality by making requests to the PokeAPI and use the loading and alert controller of Ionic 4!

Creating a Basic Ionic 4 App

We start with a new blank app and for the beta make sure to add the type of the project:

Are you ready to start learning?

Join the Ionic Academy

We’ve also generated another page and two services that we will use later one. For now though make sure you add the HttpClientModule to your app/app.module.ts like this:

That’s all for the bootstrapping phase!

Applying Guards & Resolver

To use our new functionality we can directly add the mandatory elements to our routing configuration which is provided already inside your project.

For every route you can specify a lot of options, and we want to add a resolve block and also the canActivate entry.

The resolve is called once a route is loaded and performs a specific resolve() function of a class you provide, in our case the DummyResolveService. The result of this function is stored inside the pokemon variable and we will later access this value inside our page.

The canActivate will check whatever you like and return a boolean whether the user is allowed to access the page. This is really helpful for creating an authentication with Angular but we’ll just add a simple dummy check in here.

For now go ahead and change the app/app-routing.module.ts to:

You can use the same guards and resolve functions for many routes, in our case we just add it to the details route which receives an id inside the URL which we can than use later on.

Navigating Around

We’ve got the routing in place but we need to add some more functionality to actually navigate inside our app. Inside our starting page we add three buttons which all open the details page with a different id.

There’s nothing else we need in here so change your app/home/home.page.html to:

On our DetailsPage we need to add a button to go back (which is not automatically there anymore with Ionic 4) and we will also try to display the name of the Pokemon, so go ahead and change the app/details/details.page.html to:

The view needs the Pokemon object and normally this can get you into trouble: If you simple pass the ID to that page and make the API call in here the variable will be null once the page appears!

But our resolver will actually load the object from the API, add the response information to our route and our page can directly use the value in the init which means you can be sure the data is available once you are inside that page.

To get the information we use the snapshot.data of the route like this inside the app/details/details.page.ts:

Now everything is in place and we can get to the meat of this Quick Win!

Creating the Guard

The guard allows or prevents access to a route or page inside your app. In our case we want to check the ID inside the route and only allow access if it’s unequal 100 (yeah, very realistic case).

We can always access the parameters of the route using the ActivatedRouteSnapshot, here and inside the resolver as well, because they are called more or less in the transition phase between the navigation.

If the user is not allowed we also want to display a little alert, and instead of adding the code to all pages we can simply add it right here, so go ahead and change the app/guards/dummy-guard.service.ts to:

Now you can only use the first and last button but not the second which tries to navigate to /home/100 and ends in the alert for unauthorised access!

Creating the Resolver

The resolver is even more interesting as we can put in an asynchronous operation that will be fulfilled before the navigation continues.

In our example we first get the id of the Pokemon we want to load (before showing the details page), than we create and show a loading indicator (using the new Ionic 4 way!) and finally return an Observable. Inside the Observable we also hide the loading again but that’s just a side note.

This means, the resolve function can perform any standard operation or even return an Observable or Promise and it will always be resolved before the page is loaded.

To finish it, add the resolver code inside the app/resolver/dummy-resolve.service.ts:

If you leave out the loading it appears as if your app is very slow because the API call is pending and only once it’s finished the new page appears, so if you are using a resolver with async code make sure to show some sort of progress or loading indicator to your users!

Both guards and resolver are a great way to embrace more Angular functionalities inside your Ionic app and to do things the Angular way!

You can also find a video version of this Quick Win below.

Tweet
Reddit
+1
Share22
Email
22 Shares