angular - 使用@canActivate的Dart angular2

Question

有关Dart和angular2的教程不足以解释，如何保护和授权我的应用程序。

如何在angular2的dart中实现CanActivate和Routers？

Answer 1

这是一个使用CanActivate保护组件的示例(source)；

import 'dart:html';
import 'package:angular2/core.dart';
import 'package:angular2/router.dart';

@Component(
  selector: 'my-app',
  styleUrls: const ['app_component.css'],
  template: '''
  <h1>My First Angular 2 App</h1>
  <div>
    <a [routerLink]="['Home']">home</a> - 
    <a [routerLink]="['General']">general area</a> - 
    <a [routerLink]="['Secret']">secret area</a>
  </div>
  <router-outlet></router-outlet>
  ''',
  directives: const [ROUTER_DIRECTIVES],
  providers: const [ROUTER_PROVIDERS],
)
@RouteConfig(const [
  const Route(
      path: '/', name: 'Home', component: HomeComponent, useAsDefault: true),
  const Route(path: '/secret', name: 'Secret', component: SecretComponent),
  const Route(path: '/general', name: 'General', component: GeneralComponent),
])
class AppComponent {}

@Component(
  selector: 'secret-area',
  template: '<div>Welcome to the secret area</div>',
)
@CanActivate(secretValidator)
class SecretComponent {}

secretValidator(ComponentInstruction next, ComponentInstruction prev) {
  if (prev.routeName == 'General') return true;
  window.alert('Unauthorized');
}

@Component(
  selector: 'general-area',
  template: '<div>Welcome to the general area</div>',
)
class GeneralComponent {}

@Component(
  selector: 'm-home',
  template: '<div>Welcome</div>',
)
class HomeComponent {}

此示例仅在您当前正在查看 SecretComponent时加载 GeneralComponent，否则不加载。