角度1.5 $ルートルーターでrouterOnActivate

Question

ログインしていない場合は、到達しようとしているコンポーネントのいずれかに進む前に、ユーザーが適切にログインしていることを確認します。

私の考えは、ルートルーターの$routerOnActivateでチェックを行うことです。サブルートの問題をどのように解決するか

しかし、何かをログに記録しようとすると、何も起こっていないようです。例：

angular 
    .module('app') 
    .config(function($locationProvider) { 
     $locationProvider.html5Mode(true); 
    }) 
    .value('$routerRootComponent', 'app') 
    .component('app', { 
      templateUrl:'landing.html', 
      controller: MainController, 
      $routeConfig: [ 
       { path: '/', name: 'Dashboard', component: 'dashboard', useAsDefault: true }, 
       { path: '/media', name: 'Media', component: 'media'} 
       ... 
      ] 
    }); 


function MainController(){ 
    this.$routerOnActivate = function(next, previous){ 
     console.log('activated', next, previous); 
    }; 
} 

同じコード私はrouteConfigに指定されているコンポーネントのいずれかにそれを置く場合this.$routerOnActivate作品。しかし、明らかに私はすべてのコンポーネントで同じチェックをしたくないのですが、むしろそれを一度グローバルに解決しています。

1.5のアプローチは何ですか？私のコメントから

Answer 1

貼り付け

を要求したとして、何についてのページ上の負荷にあなたのチェックを実行しますか？これはangular.runで完全に動作します。

セッションの有効期限を処理する場合は、すべての要求にインターセプタを追加して、401応答を監視できます。

Answer 2

代わりのページをロードするのチェックを行って、使用して、次：

角度が$canActivate命名これらのエッジケースを処理するための特別なコンポーネントのライフサイクルフックを持っている - それは、それをアクティブにしようとすべきか否かをチェックします。特定のユーザーの状態について、コンポーネントがコンポーネントにアクセスできるかどうかを検証するために、認証/認可サービスに問い合わせることができます。

このように、コンポーネントは、自分自身をアクティブ化するために必要なチェックをカプセル化するほどスマートになります。

また、$httpなどのサービスやカスタムサービスを注入して、サーバーと通信することもできます。以下のコードスニペットでは、私は$timeoutを使用してこの呼び出しを真似しますが、falseを返した場合、コンポーネントはアクティブ化されません。

angular.module('app').component('someComponent', { 
    template: 'this is an inline component template', 
    $canActivate: function ($timeout) { 
     return $timeout(function(){ 
      return true; 
     }, 2000); 
    } 
}); 

$routerOnActivateという別のフックを使用して、次のルートと前のルートを読み取ります。ルートのパラメータに興味がある場合は、そのルートに渡されたパラメータを常に持つオブジェクトであるnext.paramsを使用してください。例えばnext.params.id idは、要求されたルートに渡されたパラメータです。

使用$canActivate使用して活字体：

活字体でI've written a post regarding how to use write AngularJS componentsと私は今日公開しますルータのライフサイクルフックを使用するには、いくつかのドラフトを持っています。その上のJavaScriptコードスニペットは、$canActivateを使用して上記のように

class ReviewDetailsComponent implements ng.IComponentOptions { 
     templateUrl = 'app/components/review-details.component.html'; 

     // function member for this hook doesn't work!! 
     // so either use lambda expression or function directly. 
     $canActivate = $timeout => $timeout(() => true, 3000); 

     controllerAs = 'model'; 
     controller = ['$http', ReviewDetailsController]; 
    } 

angular.module('app').component('reviewDetails', new ReviewDetailsComponent()); 

typescriptですコードは同じである：それまで、ここで以下の活字体を使用して、いくつかのフックを使用するコードです。

残念ながら、これが$canActivate()のようなクラスの関数メンバとして定義され、生成されたjavascriptがReviewDetailsComponent.prototype.$canActivateのようなプロトタイプを使用して定義されたこのメンバである場合、動作しませんでした。

しかし、ラムダ式の構文や関数を使って直接書くとうまく動作します。クラスを使用してコンポーネントを定義する場合、この場合はラムダ式を選択するとよいでしょう。

使用$routerOnActivateこの場合、リンクコントローラはまた、$routerOnActivateという名前の別のライフサイクルフックを使用して、関数メンバとして定義されている場合、これはうまく機能活字体

を使用して：

interface IReviewDetailsController { 
    id: number; 
    $routerOnActivate(next, previous); 
} 

class ReviewDetailsController implements IReviewDetailsController { 

    id: number; 

    constructor(private $http: angular.IHttpService) { } 

    $routerOnActivate(next, previous) { 
     this.id = next.params.id; 

     // talk to cache or server to get item by id 
     // & show that on UI 
    } 
}