Question

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

我的网站包含一个受授权保护的核心模块，以及一个未受保护的登录页面。

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

这是我的顶级路由模块。

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

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

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

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

Answer 1

尝试添加pathMatch：＆＃39; full＆＃39;像这样：

{路径：＆＃39; **＆＃39;，redirectTo：＆＃39;＆＃39;，pathMatch：＆＃39;完整＆＃39;}

或

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

}

在Angular2中使用后卫捕获重定向路由

1 个答案: