2

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

私の考えは$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);
    };
}

this.$routerOnActivaterouteConfigで指定されたコンポーネントのいずれかに配置すると、同じコードが機能します。ただし、明らかに、すべてのコンポーネントで同じチェックを行うのではなく、グローバルに一度解決したいと考えています。

1.5のアプローチは何ですか？

4

2 に答える 2

2

ページをロードするときにチェックを実行する代わりに、次を使用します。

Angular には、名前が付けられたこれらのエッジ ケースを処理するための特別なコンポーネント ライフサイクル フックがあり$canActivate、アクティブ化を試みるかどうかを確認します。特定のユーザーの状態について、コンポーネントへのアクセスが許可されているかどうかを検証するために、認証/承認サービスと対話することができます。

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

$httpまた、カスタム サービスなどのサービスを挿入して、サーバーと通信することもできます。以下のコード スニペットでは、$timeouttrue を返すだけでこの呼び出しを模倣しています。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そのルートに渡されたパラメーターを常に持つオブジェクトである which を使用します。たとえばnext.params.id、id は要求されたルートに渡されたパラメーターです。

$canActivateTypeScriptを使用して使用します。

TypeScript でAngularJS コンポーネントの記述を使用する方法に関する投稿を書きました。ルーターのライフサイクル フックを使用するためのいくつかのドラフトを今日公開します。それまでは、以下の TypeScript を使用していくつかのフックを使用するコードを次に示します。

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 コードは、 を使用する上記の javascript コード スニペットと同じ$canActivateです。

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

ただし、ラムダ式の構文または関数を直接使用して記述した場合はうまく機能します。クラスを使用してコンポーネントを定義している場合、この場合はラムダ式を選択することをお勧めします。

$routerOnActivateTypeScriptを使用して使用する

この場合のリンクされたコントローラーは、という名前の別のライフサイクル フックも使用します。$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
    }
}
于 2016-05-15T14:28:50.773 に答える