Question

我正在学习Angular（从AngularJS 1.5升级到Angular）并尝试在v1.5中可以做的事情，比如保护路线。

使用AngularCLI我添加了一个后卫，但是一旦它被提供给canActivate，它就会抛出这个错误：

ERROR ZoneAwareError {__zone_symbol__error: Error: Uncaught (in promise): Error
Error
    at Error.ZoneAwareError (http://localhost:4200/polyfil…, rejection: Error, promise: ZoneAwarePromise, zone: Zone, task: ZoneTask}

如果我只使用canActivate: []，则错误消失，但一旦它canActivate: [AuthGuard]，无论我对守卫做什么，都会抛出错误。

我一直在关注docs，如果我用他们在src/app/auth-guard.service.ts (excerpt)中提供的最简单的示例替换AuthGuard，它仍然会抛出相同的错误。

有人能看出为什么这不起作用吗？

// APP-ROUTING.MODULE.TS

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

import { AuthGuard } from './core/auth.guard';

import { DashboardComponent } from './dashboard/dashboard/dashboard.component';
import { PageNotFoundComponent } from './core/page-not-found/page-not-found.component';

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent,
    pathMatch: 'full',
    canActivate: [AuthGuard] // <-- throws error
    //canActivate: [] // <-- no error
  },
  { path: '**', component: PageNotFoundComponent }
];

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

// AUTH.GUARD.TS

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs/Observable';

import { AuthService } from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return true;
  }
}

// AUTH.GUARD.TS（文档中较简单的版本仍然失败）

import { Injectable }     from '@angular/core';
import { CanActivate }    from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
  canActivate() {
    console.log('AuthGuard#canActivate called'); // never logs to console
    return true;
  }
}

Answer 1

好的，虽然提供的文档中没有示例。文档确实在单行中表明Guards and the service providers they require must be provided at the module-level.所以我在提供者（以及它使用的服务）下添加了app.module.ts，因为它将在整个应用程序中使用，现在可以使用。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';   
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module'; 
import { AuthModule } from './auth/auth.module';
import { CoreModule } from './core/core.module';
import { DashboardModule } from './dashboard/dashboard.module'; 
import { AuthGuard } from './core/auth.guard';
import { AuthService } from './core/auth.service'; // <-- also had to add  
import { PageNotFoundComponent } from './core/page-not-found/page-not-found.component';

// TODO: trim down imports and spread them into features like FormsModule and HttpModule
@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  imports: [
    // Angular modules
    BrowserModule,
    FormsModule,
    HttpModule,
    // Custom modules
    CoreModule,
    AuthModule,
    DashboardModule,
    AppRoutingModule
  ],
  providers: [AuthGuard, AuthService], // <-- added here
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 2

将警卫放在仪表板路径定义的位置：

//...
{  path : 'dashboard',
   component : DashboardComponent
   canActivate: [AuthGuard]
}
//...

Angular Route Guard在提供

2 个答案: