NoProviderError在角2中使用CanActivate

Question

我用的是角度2和路由器3.0.0-aplha.8。

我试图使用CanActivate函数来检查用户是否经过身份验证。我有一个实现AuthGuard的CanActivate，现在我只返回true。

route.ts

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

import { AuthGuard } from './auth-guard'

import { SecurityComponent } from './security/security.component';
import { AdminDashboardComponent } from './admin/admin.dashboard.component';


export const mainRoutes: RouterConfig = [
{ path: '', component: SecurityComponent,  },
{ path: 'admin', component: AdminDashboardComponent, terminal: true, canActivate: [AuthGuard] }]

export const MAIN_ROUTER_PROVIDER = provideRouter(mainRoutes);

auth-卫士

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

@Injectable()
export class AuthGuard implements CanActivate {
   constructor(private router: Router) {}

   canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot){
       return true;
   }
}

当我试图访问"/admin“(AdminDashboardComponent)时，会得到以下错误：

​

​

我不知道发生了什么。有人知道吗？

谢谢伊万

Answer 1

我想如果你把MAIN_ROUTER_PROVIDER改成

export const MAIN_ROUTER_PROVIDER = [provideRouter(mainRoutes), AuthGuard];

应该管用的。

Answer 2

您也需要引导这些警卫，这样才能正确地使用：

export const AUTH_PROVIDERS = [AuthGuard];

然后

export const MAIN_ROUTER_PROVIDER = [
  provideRouter(mainRoutes),
  AUTH_PROVIDERS,
];

更多信息请访问https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard

Answer 3

您还需要引导AuthGuard。按以下方式更新路由提供程序

export const MAIN_ROUTER_PROVIDER = [provideRouter(mainRoutes), AuthGuard]

并调整引导函数以包含此列表bootstrap(appcomp,MAIN_ROUTER_PROVIDER)。