Angular 2 CanActivate 不起作用

标签 angular typescript angular2-routing

我正在尝试创建路由守卫,阅读一些博客和 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] },
];

然后我在 Bootstrap 方法中传递它们:

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,构造函数也是如此。

编辑: 其他没有任何路由认证的路由也能正常工作。

编辑 2: 我正在使用 Angular/核心 2.2.0, Angular/路由器 3.2.0

最佳答案

更新到 angular/core 2.3.0,angular/router 3.3.0 解决了这个问题,我不知道为什么。

关于Angular 2 CanActivate 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41061276/

相关文章:

angular - 在单页 Angular 元素中开发的多个自定义元素

node.js - 如何捕获 HttpErrorResponse 状态并将其显示在 Angular 组件中

html - 如何在没有第三方的情况下使用 Angular/Typescript 对 HTML 表格进行排序?

javascript - TypeScript:使用函数参数作为 JSON 键名称

angular - 在 Angular 2 中的 HTTP 请求之前和/或之后调用通用函数

scala - 求和类型的标准名称,如 Either,但适用于 3 种情况?

angular - routerlink 不重新加载组件

angularjs - Angular 2 - 组件如何识别 URL 更改?

angular - 安装带有新组件路由器的 Angular 2 RC2

Angular 第一个站点访问非根路径在本地有效,但在生产中无效