Question

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

如何在angular2中实现CanActivate和dart中的路由器？

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。

Answer 2

在AngularDart 5上，您可以这样做：

class MyComponent implements CanActivate {

  @override
  Future<bool> canActivate(RouterState current, RouterState next) {

   return Future(() => isLoggedIn);
  }
}

用@canActivate飞镖角度2

2 个答案: