Capture redirect route with guard in Angular2

Question

I'm having trouble capturing the original navigating route using a guard in Angular 2.

My site consists of a core module protected by an authorization guard, and a login page that's unprotected.

The core module has it's own sub routes defined in it's own app routing file, and any undefined routes are redirected to the root path.

Here's my top level routing module.

import { NgModule }               from '@angular/core';
import { RouterModule, Routes }   from '@angular/router';
import { AuthGuard }              from './auth';

const routes: Routes = [
  // Login module is public
  { path: 'login',  loadChildren: 'app/auth/auth.module#AuthModule' },

  // Core route protected by auth guard
  { path: '',       loadChildren: 'app/core/core.module#CoreModule', canLoad: [AuthGuard] },

  // otherwise redirect to home
  { path: '**',     redirectTo: '' }
];

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

And here is the AuthGuard class.

import { Injectable } from '@angular/core';
import { Router, CanLoad, Route } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class AuthGuard implements CanLoad {

  constructor(
    private authService: AuthService,
    private router: Router
  ) {}

  canLoad(route: Route): boolean {
    this.authService.redirectUrl = `/${route.path}`;
    console.log('path:' + route.path);

    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

This is a pretty straightforward login/redirect scheme, however the route.path value is always empty, regardless of what URL I navigate to. I have a hunch that it has something to do with the { path: '**', redirectTo: '' } route but I'm not sure.

I don't want to use canActivate because I only want the main module loaded if the user is actually logged in.

What I expected was that if I navigate to /foobar then route.path would be set to foobar in the AuthGuard class but it is not. It is always empty, thus I am unable to do a correct redirect after the user logs in.

Answer 1

Try adding the pathMatch: 'full' like this:

{path: '**', redirectTo: '', pathMatch: 'full'}

or

import {CanActivate, RouterStateSnapshot, ActivatedRouteSnapshot} from "@angular/router";
 import { Subscription, Observable } from "rxjs/Rx";



export class HomepageGuard implements CanActivate {


canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
    console.log(`[homepage.guard.ts]-[canActivate()]`);
    console.log(route);
    console.log(state);
    // are you allowed to continue
    return true;
}

}