Question

我正在尝试创建路线保护，阅读一些博客和Angular 2 official documentation。但我仍然无法使其发挥作用。

这是RouteGuard（我已经删除了日志记录逻辑，以确保问题出在路由中，而不是在身份验证逻辑中。）：

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

@Injectable()
export class RouteGuard implements CanActivate {
  constructor() {
    var a = 5;
    console.log("RouterGuard called");
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    console.log("RouterGuard called");
    return true;
  }
}

这里有一些路线：

import { RouteGuard } from './common/routeGuard';
import { ClassifiersComponent } from './components/classifiers/classifiers.component';
import { Routes } from '@angular/router';
import { HomeComponent } from './components/home/home.component';

export const routes: Routes = [
    { path: '', component: HomeComponent },
    { path: 'classifiers', component: ClassifiersComponent, canActivate: [RouteGuard] },
];

然后我用bootstrapper方法传递它们：

import { RouteGuard } from './app/common/routeGuard';
import { ClassifiersComponent } from './app/components/classifiers/classifiers.component';
import { HomeComponent } from './app/components/home/home.component';
import { routes } from './app/app.routes';

@NgModule({
    imports: [
        RouterModule.forRoot(routes)
    ],
    providers: [
        { provide: LocationStrategy, useClass: PathLocationStrategy },
        { provide: APP_BASE_HREF, useValue: '/' },
        RouteGuard
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        ClassifiersComponent
    ],
    bootstrap: [AppComponent]
})
export class AppModule {}

我不确定这一切有什么问题，可能是我错过了一些重要的事情。从调试我可以看出它正在击中canActivate（）断点，但是不执行console.log，同样适用于构造函数。

修改其他没有路由认证的路由工作正常。

EDIT2： 我正在使用角/核心2.2.0， angular / router 3.2.0

Answer 1

更新到角度/核心2. 3 .0，角度/路由器3. 3 .0解决了这个问题，我不明白为什么。

Angular 2 CanActivate不起作用

1 个答案: