Angular Dart: Redirect users to the login page if the user is not logged in

Question

I am working on a website with Angular Dart and i'm trying to implement routing so i have defined the following routes as described in the documentation:

class Routes {
  static final login = RouteDefinition(
      routePath: RoutePaths.login,
      component: login_component.LoginComponentNgFactory,
      useAsDefault: true
  );
  static final downloads = RouteDefinition(
      routePath: RoutePaths.downloads,
      component: download_component.DownloadComponentNgFactory
  );
  static final management = RouteDefinition(
      routePath: RoutePaths.management,
      component: management_component.ManagementComponentNgFactory,
  );
  static final objects = RouteDefinition(
      routePath: RoutePaths.objects,
      component: object_component.ObjectComponentNgFactory
  );
  static final reports = RouteDefinition(
      routePath: RoutePaths.reports,
      component: report_bug_component.ReportBugComponentNgFactory
  );
  static final settings = RouteDefinition(
      routePath: RoutePaths.settings,
      component: settings_component.SettingsComponentNgFactory
  );

  static final all = <RouteDefinition>[
    login,
    downloads,
    management,
    objects,
    reports,
    settings
  ];
}

I have set the login page to be the default route, but i want to prevent users from going to different routes before they login. So in case a user goes to URL/downloads before they logged in i want to redirect them to the login page. I read that this is possible in Angular Typescript by adding a CanActivate: [AuthGuard] to the routes, but this doesn't seem possible with Angular Dart. Does anyone know another way to achieve this?

Answer 1

You can check the login status in the root AppComponent. e.g. ngOnInit event. If the user is not logged in, you can redirect the user to the login page:

_router.navigate(_loginUrl);

You can find more details about imperative redirection – here

Sadly, AngularDart development seems not very active this year.

Answer 2

Although it has been some time since this question has been asked. Still if you are following it or if anyone finds this question.

We may check whether the user is logged in as soon as the component is created and redirect them to the login page.

Using other life cycle hooks might not be useful since by the time they are invoked the object of the component is already initialised and you may want to avoid it.

Eg:

@Component(
    selector: 'my-component'
    directives: [
      ...
      routerDirectives,
      ...
    ]
)
class MyComponent {
    /// should always be initialised as false.
    var _isLoggedIn = false;

    /// Router object to navigate.
    final Router _router;
    MyComponent(this._router) {
        isLoggedIn = // Find out if the user is logged in.
        if(!isLoggedIn) {
            _router.navigate(RoutePaths.login.toUrl());
        }
    }
    
}