Home/ Questions/Q 2454

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Latest Questions

Author
  • 61k
Asked: 2024-11-26T05:34:11+00:00

Angular Dart Router – How to protect a route using RouterHook

  • 61k

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 }
Enter fullscreen mode Exit fullscreen mode

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;   } }
Enter fullscreen mode Exit fullscreen mode

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),   ), ];
Enter fullscreen mode Exit fullscreen mode

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;   } }
Enter fullscreen mode Exit fullscreen mode

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;   } }
Enter fullscreen mode Exit fullscreen mode

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;     });   } }
Enter fullscreen mode Exit fullscreen mode

Finally inject it along with the Router and voila! 

@GenerateInjector([   ClassProvider(AuthService, useClass: AuthServiceImpl),   ClassProvider(RouterHook, useClass: AppRouterHook),   routerProvidersHash, ]) final injectorFactory = template.injectorFactory$Injector;
Enter fullscreen mode Exit fullscreen mode

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]);
Enter fullscreen mode Exit fullscreen mode

Or redirect to a different path. 

RouteConfig(redirectIfNotLogged: 'home');
Enter fullscreen mode Exit fullscreen mode

angulardartwebdev
Share

Leave an answer

You must login to add an answer.

Need An Account,