Angular2 CanActivate 从 beta 到当前的 RC3

Question

我正在尝试在 Angular2 中实现 Auth0 登录方法 video 。他还使用 angular2-jwt。

我读了documentation ，尝试实现它，但我无法正确实现。
我尝试了导出类 NavbarComponent 实现了 CanActivate、routerCanActivate(){}、canActivate(){}。我被困住了。

CanActivate 需要进行哪些更改才能在当前的 RC3 中工作？

import {CanActivate} from 'angular2/router';
import {tokenNotExpired, JwtHelper} from 'angular2-jwt'; 
...    
@CanActivate (()=>tokenNotExpired())
export class NavbarComponent{
...
}

Answer 1

参见

• https://angular.io/docs/ts/latest/guide/router.html#!#can-activate-guard
• https://angular.io/docs/ts/latest/guide/router.html#!#can-deactivate-deactivate

创建一个充当守卫的服务类:

import { CanActivate }    from '@angular/router';

export class AuthGuard implements CanActivate {
  canActivate() {
    console.log('AuthGuard#canActivate called');
    return true;
  }
}

在新的路由器中，现在支持开箱即用的依赖注入(inject)

配置使用该守卫的路由:

{
  path: 'admin',
  component: CrisisAdminComponent,
  canActivate: [AuthGuard]
},

守卫服务还可以返回一个解析为 true 或 false 的 observable

import { Injectable } from '@angular/core';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/delay';

@Injectable()
export class AuthService {
  isLoggedIn: boolean = false;

  login() {
    return Observable.of(true).delay(1000).do(val => this.isLoggedIn = true);
  }

  logout() {
    this.isLoggedIn = false;
  }
}

guard 服务需要像任何其他服务一样提供。例如 APP_ROUTER_PROVIDERS

就是一个好地方

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes),
  AuthGuard
];