6

我有这个AuthGuard：

export class AuthGuard implements CanActivate {

  constructor (private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    if (localStorage.getItem('token')) {
      return true;
    }

    this.router.navigate(['/login']);
    return false;
  }
}

我已经在我的AppModule：

@NgModule({
  declarations: [/*...*/],
  imports: [NotificationRoutingModule],
  providers: [AuthService, AuthGuard],
  bootstrap: [AppComponent]
})
export class AppModule {
}

我试图在我的路由模块中使用这个守卫，如下所示：

const routes = [
  {
    path: 'notification',
    component: NotificationRootComponent
    children: [
      {path: '', redirectTo: 'list', pathMatch: 'full'},
      {path: 'list', component: NotificationListComponent, canActivate: [AuthGuard]},
      {path: ':id', component: NotificationDetailComponent, canActivate: [AuthGuard]}
    ]
  }
];

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

我得到这个错误：

在此处输入图像描述

我错过了什么？这个错误的根源在哪里？

编辑： 我正在使用 Angular 4.4.6

当我使用基本路由保护并更新路由配置时，它工作正常：

@NgModule({
  declarations: [],
  imports: [],
  providers: [
    {
      provide: 'CannotBeActivated',
      useValue: () => {
        return false;
      }
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}


const routes = [
  {
    path: 'notification',
    component: NotificationRootComponent,
    children: [
      {path: '', redirectTo: 'list', pathMatch: 'full'},
      {path: 'list', component: NotificationListComponent, canActivate: ['CannotBeActivated']},
      {path: ':id', component: NotificationDetailComponent, canActivate: ['CannotBeActivated']}
    ]
  }
];

**我的 tsconfig.json：**

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}
4

1 回答 1

13

您只是错过了将 @Injectable() 放在 AuthGuard 服务之前

于 2017-11-16T14:23:38.067 回答