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 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.

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.

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

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

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 ...)

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.

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.

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!

@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.

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

Or redirect to a different path.

RouteConfig(redirectIfNotLogged: 'home');

Blog

Angular Dart Router - How to protect a route using RouterHook

Hadrien Lejard

AuthService

Let's begin

Route definitions

RouterHook

Why use `_injector.provideType(Router)` ?

Initialize AuthService

Going further

Join Our Newsletter. No Spam, Only the good stuff.

Related

Angular Dart Router - How to protect a route using RouterHook

Hadrien Lejard

AuthService

Let's begin

Route definitions

RouterHook

Why use _injector.provideType(Router) ?

Initialize AuthService

Going further

Join Our Newsletter. No Spam, Only the good stuff.

Related

Why use `_injector.provideType(Router)` ?