5

angular $httpインターセプターを使用して、ajaxリクエストが401(認証されていない)を返すかどうかを確認します。応答が 401 の場合、元の要求がキューに入れられ、ログイン フォームが表示され、ログインに成功した後、キューに入れられた要求が再試行されます。これはすでに $http で機能しており、angular インターセプターのソースは次のとおりです。

define('common.service.security.interceptor', ['angular'], function() {
'use strict';

angular.module('common.service.security.interceptor', ['common.service.security.retryQueue'])

.factory('securityInterceptor', [
    '$injector',
    '$location',
    'securityRetryQueue',
    function($injector, $location, securityRetryQueue) {

        return function(promise) {

            var $http = $injector.get('$http');


            // catch the erroneous requests
            return promise.then(null, function(originalResponse){
                if(originalResponse.status === 401){
                    promise = securityRetryQueue.pushRetryFn('Unauthorized', function retryRequest(){
                        return $injector.get('$http')(originalResponse.config);
                    });
                }

                 return promise;
            });
        };
    }
])

// register the interceptor to the angular http service. method)
.config(['$httpProvider', function($httpProvider) {
    $httpProvider.responseInterceptors.push('securityInterceptor');

}]);});

このAngular $httpインターセプターを使用して簡単なリクエストを行うにはどうすればよいですか?

Breeze は、ファイル "Breeze/Adapters/breeze.ajax.angular.js" で angular $http サービスのラッパーを提供します。したがって、最初のアイデアは、風にそれを使用するように指示することでした:

breeze.config.initializeAdapterInstance("ajax", "angular", true);

angular.js をデバッグすると、breeze が実際に $http を使用していることがわかりますが、上記の登録されたインターセプターは実行されません。$http 内には、登録されたインターセプターを保持する配列 "reversedInterceptors" があります。この配列をコンソールに記録します。$http を使用すると、この配列の長さは (予想どおり) 1 ですが、breeze でリクエストを行うと、この配列は空になります。

問題は、この $http インターセプターを簡単なリクエストで使用するにはどうすればよいですか?

これは、そよ風によって提供された、breeze.ajax.angular.js のコードです。

define('breeze.ajax.angular.module', ['breeze', 'angular'], function (breeze) {
'use strict';
/* jshint ignore:start */
var core = breeze.core;

var httpService;
var rootScope;

var ctor = function () {
    this.name = "angular";
    this.defaultSettings = {};
};

ctor.prototype.initialize = function () {

    var ng = core.requireLib("angular");

    if (ng) {
        var $injector = ng.injector(['ng']);
        $injector.invoke(['$http', '$rootScope',
            function (xHttp, xRootScope) {
                httpService = xHttp;
                rootScope = xRootScope;
        }]);
    }

};

ctor.prototype.setHttp = function (http) {
    httpService = http;
    rootScope = null; // to suppress rootScope.digest
};

ctor.prototype.ajax = function (config) {
    if (!httpService) {
        throw new Error("Unable to locate angular for ajax adapter");
    }
    var ngConfig = {
        method: config.type,
        url: config.url,
        dataType: config.dataType,
        contentType: config.contentType,
        crossDomain: config.crossDomain
    }

    if (config.params) {
        // Hack: because of the way that Angular handles writing parameters out to the url.
        // so this approach takes over the url param writing completely.
        // See: http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/
        var delim = (ngConfig.url.indexOf("?") >= 0) ? "&" : "?";
        ngConfig.url = ngConfig.url + delim + encodeParams(config.params);
    }

    if (config.data) {
        ngConfig.data = config.data;
    }

    if (!core.isEmpty(this.defaultSettings)) {
        var compositeConfig = core.extend({}, this.defaultSettings);
        ngConfig = core.extend(compositeConfig, ngConfig);
    }

    httpService(ngConfig).success(function (data, status, headers, xconfig) {
        // HACK: because $http returns a server side null as a string containing "null" - this is WRONG.
        if (data === "null") data = null;
        var httpResponse = {
            data: data,
            status: status,
            getHeaders: headers,
            config: config
        };
        config.success(httpResponse);
    }).error(function (data, status, headers, xconfig) {
        var httpResponse = {
            data: data,
            status: status,
            getHeaders: headers,
            config: config
        };
        config.error(httpResponse);
    });
    rootScope && rootScope.$digest();
};

function encodeParams(obj) {
    var query = '';
    var key, subValue, innerObj;

    for (var name in obj) {
        var value = obj[name];

        if (value instanceof Array) {
            for (var i = 0; i < value.length; ++i) {
                subValue = value[i];
                fullSubName = name + '[' + i + ']';
                innerObj = {};
                innerObj[fullSubName] = subValue;
                query += encodeParams(innerObj) + '&';
            }
        } else if (value instanceof Object) {
            for (var subName in value) {
                subValue = value[subName];
                fullSubName = name + '[' + subName + ']';
                innerObj = {};
                innerObj[fullSubName] = subValue;
                query += encodeParams(innerObj) + '&';
            }
        } else if (value !== undefined) {
            query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
        }
    }

    return query.length ? query.substr(0, query.length - 1) : query;
}


breeze.config.registerAdapter("ajax", ctor);

breeze.config.initializeAdapterInstance("ajax", "angular", true);
/* jshint ignore:end */
});
4

2 に答える 2

6

setHttp メソッドを使用すると、そよ風角度 ajax アダプターで http インターセプターを使用できます。私の環境では、次のようになります。

(function() {
    'use strict';

    var serviceId = 'entityManagerFactory';
    angular.module('app').factory(serviceId, ['$http', emFactory]);

    function emFactory($http) {

        var instance = breeze.config.initializeAdapterInstance("ajax", "angular");
        instance.setHttp($http);

        ...

    }
})();

これに関する情報を実際に見つけた唯一の場所は、ダウンロードページの 1.4.4 のリリース ノートです。これが何をするのかよくわかりません。私はそよ風の人の一人がより良い説明を持っていると確信しています.

于 2014-01-24T17:12:53.777 に答える
4

setHttp($http)@almaplayera の説明に従って呼び出す必要があります。彼を正解としてマークしてください。

これが必要な理由です。

デフォルトでは、breeze angular ajax アダプターは、利用可能な $http のインスタンスを使用して自身を初期化します。残念ながら、ほとんどのスクリプトがロードされている時点では、$httpYOUR APP のインスタンスは作成されていません。これは、モジュールがロードされるまで発生しません...これは通常、そよ風がロードされてからしばらく後に発生します。

したがって、まったく機能しないアダプターを作成するのではなく、そよ風の独自のインスタンスをスピンアップし$http、angular ajax アダプターをそのインスタンスに接続します。

あなたのコードが特別なことをしなければ、これでうまくいきます。最適ではありません。必要以上に 1$digestサイクル多くなります。しかし、それはほとんどの人に有効であり、そのままで対処するには十分すぎる構成ノイズがあることを認めましょう。

しかし、あなたは何か特別なことをしています。$http微風がそれ自体のために作成したものではなく、非常に具体的な のインスタンスを構成しています。

したがって、風にあなたのインスタンスを使用するように指示する必要があります$http...そして、それはあなたが呼び出すときに起こることですsetHttp($http);

このフィードバックのおかげで、Angular アプリの構成方法を説明するために、ajax アダプターに関する簡単なドキュメントを更新しました。

于 2014-01-24T19:56:19.667 に答える