[Tips]AngularDartのguardについて

はじめに

未認証で見せたくないページとかありますよね？それを見せない方法として本家Angularではguardという仕組みがあります。AngularDartにおけるGuardをどう書くのか調べました。

pubspec.yamlにangular_routerを記述

pubspec.yaml

dependencies:
  angular: ^5.2.0
  angular_router: ^2.0.0-alpha+19 #追加

コンポーネントのライフサイクルにcanActivateを実装する

import 'package:angular/angular.dart';
import 'package:angular_router/angular_router.dart';

@Component(
  selector: 'sample-component',
  templateUrl: 'sample_component.html',
)

class SampleComponent implements CanActivate{
  @override
  Future<bool> canActivate(RouterState current, RouterState next) async{
    // ここに処理を書く return trueであれば画面表示する
    return false;
  }
}

これでOK