Angular Dart Router - How to protect a route using RouterHook
Tags: dart, angular, webdev
Published: 2020-12-30 15:14:45

In this article, you will learn how to protect a route with `RouterHook` and `CanActivate` guard. I will assume you already setup your Angular dart application and basic routing, if not you can follow the [Tour of Heroes](https://angulardart.dev/tutorial) tutorial from the Angular team.

# AuthService
Before we start, you must have a way to know if the user is logged in (or not). I won't cover how to implements authentication but you should have something similar to the following interface.

```dart
abstract class AuthService {
  bool get isLogged;

  // request API or check storage then set isLogged boolean
  Future<void> checkIsLogged();

  ... login, register
}
```

# Let's begin

We have the following routes.

`/login`
- must be accessible only if the user is not logged
- redirect to `dashboard` if the user already logged in

`/dashboard`
- user must be logged in to access
- redirect to `login` if the user not logged

The fastest way to protect a route would be to implements `CanActivate` class on each route.

```dart
import 'package:angular_router/angular_router.dart';

class DashboardPageComponent implements CanActivate {
  final AuthService authService;

  DashboardPageComponent(this.authService);

  @override
  Future<bool> canActivate(RouterState current, RouterState next) {
    // don't activate the route if not logged
    return authService.isLogged;
  }
}
```

But this method produces a lot of boilerplate code and is harder to maintain once your app is getting bigger. You need to implement it on each component route you want to protect.

Instead, we need to execute the `isLogged` check on every route and we need a way to configure which route is protected and which one is not. To do so, we will use a `RouterHook` that implements the `canActivate` method and we will use a custom config on our route definitions.

### Route definitions
```dart
import 'package:angular_router/angular_router.dart';

import 'login.template.dart' as login_template;
import 'dashboard.template.dart' as dashboard_template;

class RouteConfig {
  final bool protected;
  final bool redirectIfLoggedIn;

  RouteConfig({
    this.protected = false,
    this.redirectIfLoggedIn = false,
  });
}

final routes = [
  RouteDefinition(
    path: 'login',
    component: login_template.LoginPageComponentNgFactory,
    additionalData: RouteConfig(redirectIfLoggedIn: true),
  ),
  RouteDefinition(
    path: 'dashboard',
    component: dashboard_template.DashboardPageComponentNgFactory,
    additionalData: RouteConfig(protected: true),
  ),
];
```

### RouterHook
> A class should extend this class and be injected along with the router to hook into route navigation. [Documentations](https://pub.dev/documentation/angular_router/latest/angular_router/RouterHook-class.html)

Basically, this is a way to execute router guard each time the router is trying to navigate to a route instead on implementing it on every route component. (CanActivate, OnActivate, OnDeactivate ...)

```dart
import 'package:angular/angular.dart';
import 'package:angular_router/angular_router.dart';

class AppRouterHook extends RouterHook {
  final AuthService _authService;
  final Injector _injector;

  AppRouterHook(this._authService, this._injector);

  // Lazily inject `Router` to avoid cyclic dependency.
  Router _router;
  Router get router => _router ??= _injector.provideType(Router);

  @override
  Future<bool> canActivate(
    Object componentInstance,
    RouterState oldState,
    RouterState newState,
  ) async {
    // TODO: check user access
    return true;
  }
}
```

By default, the `canActivate` method will let the user enter on every route.

#### Why use `_injector.provideType(Router)` ?
The Router cannot be injected in our `RouterHook`, because the Hook will also be injected in the angular `Router` and would cause cyclic dependency.


Then get the current `RouteConfig` and check user access.
```dart
final config = newState.routePath.additionalData;
if (config is RouteConfig) {
  if (config.protected && !_authService.isLogged) {
    // redirect to login if not logged
    router.navigate(
      'login',
      NavigationParams(replace: true),
    );
    return false;
  }

  if (config.redirectIfLoggedIn && _authService.isLogged) {
    // redirect to dashboard if logged in
    router.navigate(
      'dashboard',
      NavigationParams(replace: true),
    );
    return false;
  }
}
```

### Initialize AuthService
You must get the user state before we initialize the router or Angular will try to navigate before we actually know if the user is logged in or not.

```dart
import 'package:angular/angular.dart';
import 'package:angular_router/angular_router.dart';

@Component(
  selector: 'my-app',
  styleUrls: ['app_component.css'],
  template: '<router-outlet *ngIf="isReady" [routes]="routes"></router-outlet>',
  directives: [
    routerDirectives,
    NgIf,
  ],
)
class AppComponent {
  final AuthService authService;

  bool isReady = false;

  AppComponent(this.authService) {
    authService.checkIsLogged().then((_) {
      isReady = true;
    });
  }
}
```

Finally inject it along with the `Router` and voila!
```dart
@GenerateInjector([
  ClassProvider(AuthService, useClass: AuthServiceImpl),
  ClassProvider(RouterHook, useClass: AppRouterHook),
  routerProvidersHash,
])
final injectorFactory = template.injectorFactory$Injector;
```

# Going further
You can customize the `RouteConfig` to follow your own rules, like protecting a route depending on User roles.

```dart
RouteConfig(allowedRoles: [Role.admin, Role.editor]);
```

Or redirect to a different path.
```dart
RouteConfig(redirectIfNotLogged: 'home');
```