我有这个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: '',canActivate: ['CannotBeActivated']},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" ] } }
解决方法
您只是错过了在AuthGuard服务之前放置@Injectable()