javascript - 在 Angular2 中使用 guard 捕获重定向路由

Question

我在使用 Angular 2 中的守卫捕获原始导航路线时遇到了问题。

我的网站由一个受授权保护的核心模块和一个未 protected 登录页面组成。

核心模块在它自己的应用程序路由文件中定义了自己的子路由，任何未定义的路由都被重定向到根路径。

这是我的顶级路由模块。

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 {}

这是 AuthGuard 类。

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;
    }
  }
}

这是一个非常简单的登录/重定向方案，但是无论我导航到哪个 URL，route.path 值始终为空。我有一种预感，它与 { path: '**', redirectTo: '' } 路由有关，但我不确定。

我不想使用 canActivate，因为我只想在用户实际登录时加载主模块。

我期望的是，如果我导航到 /foobar，那么 route.path 将在 AuthGuard 类中设置为 foobar，但事实并非如此。它始终为空，因此我无法在用户登录后进行正确的重定向。

Answer 1

尝试像这样添加 pathMatch: 'full':

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

或

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;
}