typescript - Angular 2 RC4 路由器提供商

Question

我目前正在更新我的应用程序以使用 ner Router。除了 protected 路线，我做了一切。

主要。 ts 看起来像这样:

import {bootstrap} from '@angular/platform-browser-dynamic';
import {disableDeprecatedForms, provideForms} from '@angular/forms';
import {HTTP_PROVIDERS} from '@angular/http';
import 'rxjs/Rx';

import {AuthService} from './services/auth.service';

import {AppComponent} from './app.component';

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

bootstrap(AppComponent, [appStateProvider, APP_ROUTER_PROVIDERS, AuthService, AuthGuard, HTTP_PROVIDERS,,disableDeprecatedForms(), provideForms()])
.catch(err => console.error(err));

我实现了 auth.guard.ts:

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
import {Observable} from 'rxjs/Observable';

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private _authService: AuthService, protected _router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {

        if (state.url !== '/login' && !this._authService.isLoggedIn()) {
            this._router.navigate(['/login']);
            return false;
        }

        return true;
    }
}

在我的应用程序 route :

export const routes: RouterConfig = [
   {
    path: '',
    component: LoginComponent 
  },  
  { path: 'login', component: LoginComponent },
  { path: 'home', component: HomeComponent, canActivate: ['AuthGuard']}
];

// Export routes
export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

在此之前，我使用旧路由并且一切正常。现在，我收到消息“没有 AuthGuard 提供商!”虽然我将它包含在我的 Bootstrap 提供程序中。

在我的 app.component.ts 内部构造函数中，我有:

   if (this._authService.isLoggedIn()) {
      this._router.navigate(['/home']);
    }
    else {
      this._router.navigate(['/login']);
    }

在我更新路由器之前，如果用户没有登录，它会被重定向到登录页面，否则它会被重定向到主页，用户在没有登录之前看不到家。我哪里错了，为什么我得到这个错误是因为我将提供者作为提供者包含在我的 Bootstrap 方法中？

谢谢

Answer 1

从

中删除 '

canActivate: ['AuthGuard']},

到

canActivate: [AuthGuard]},

我还认为您应该将 pathMatch: 'full' 添加到

{
    path: '',
    component: LoginComponent,
    pathMatch: 'full' 
  },