首页 文章

在Angular 2中使用CanActivate的NoProviderError

提问于
浏览 次
2

我正在使用Angular 2和Router 3.0.0-aplha.8 .

我正在尝试使用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）时，我收到此错误：

enter image description here

我不知道发生了什么 . 有人有什么想法吗？

谢谢Iván

typescript angular angular2-routing

3 回答

  • 5

    我想如果你改变 MAIN_ROUTER_PROVIDER

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

    它应该工作 .

    回复于
  • 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

    回复于
  • 1

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

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

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

    回复于

相关问题