NoProviderError 在 Angular 2 中使用 CanActivate答案

【问题标题】：NoProviderError using CanActivate in Angular 2NoProviderError 在 Angular 2 中使用 CanActivate
【发布时间】：2016-11-02 21:49:49
【问题描述】：

我正在使用带有路由器 3.0.0-aplha.8 的 Angular 2。

我正在尝试使用 CanActivate 函数来检查用户是否已通过身份验证。我有一个实现 CanActivate 的 AuthGuard，现在我只返回 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-guard.ts

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）时，我收到了这个错误：

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

谢谢伊万

【问题讨论】：

标签： typescript angular angular2-routing

【解决方案1】：

我想如果你把MAIN_ROUTER_PROVIDER改成

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

它应该可以工作。

【讨论】：

谢谢！！我真的被困住了。您的答案与@ed-morales 的答案有什么区别。你能告诉我什么是最佳做法吗？再次感谢！
他多了一层抽象，否则就一样。

【解决方案2】：

您还需要引导守卫，以便正确使用它们：

export const AUTH_PROVIDERS = [AuthGuard];

然后

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

【讨论】：

【解决方案3】：

您还需要引导 AuthGuard。如下更新您的路线提供者

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

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

【讨论】：