Write http interceptor as class

Question

I\'m having trouble writing an angular http interceptor in plain TypeScript. The code I\'m trying to convert is the following:

.config([\'$httpProvider\', fu         


        

Answer 1

The config settings are as follows

    .config(['$httpProvider', function ($httpProvider: ng.IHttpProvider) {
        $httpProvider.interceptors.push(AuthenticationInterceptor.Factory);
    }])

and your actual class should look as follows

module Common.Security {
'use strict';

export class AuthenticationInterceptor {

    public static Factory($q: ng.IQService) {
        return new AuthenticationInterceptor($q);
    }

    constructor(private $q: ng.IQService) {
    }

    //Method name should be exactly "response" - http://docs.angularjs.org/api/ng/service/$http
    public response(response) {
        console.log(response);
        return response || this.$q.when(response);
    }

    public responseError(rejection) {
        console.log(rejection.status);
        if (rejection.status === 401) {
        }
        // Otherwise, default behavior
        return this.$q.reject(rejection);
    }
}

Answer 2

this is how i write httpinterceptor as a class

module services {

export class ErrorHttpInterceptor {
    public $log:ng.ILogService;
    public $injector:ng.auto.IInjectorService;

    public responseError = (_rejection)=>{
       //handle error here
    };
    public request = (config)=>{
        config.withCredentials = true;
        return config;
    };
    public requestError = (rejection)=>{
        var $q:ng.IQService = this.$injector.get("$q");
        this.$log.log("requestError", rejection);
        return $q.reject(rejection);
    };
    static $inject = ['$injector', '$rootScope', '$q', '$window'];
    constructor($injector:ng.auto.IInjectorService, public $rootScope, public $q, public $window){
        this.$log = $injector.get('$log');
        this.$injector = $injector;
    }
  }
}

to register

 var app =angular.module('foo',[]);
 app.config(['$httpProvider', (_$httpProvider:ng.IHttpProvider)=>{
    _$httpProvider.interceptors.push('ErrorHttpInterceptor');

}]);

Answer 3

You need to do: public response = (response) => {}

public responseError = (rejection) => { }

Because in other way your 'this' will be undefined. To understand why you need this : https://www.youtube.com/watch?v=tvocUcbCupA&hd=1

Answer 4

Register it by name : $httpProvider.interceptors.push('myInterceptorClass');

And then make sure you class is also registerd as a service :

yourApp.service('myInterceptorClass',MyInterceptorClass)

Answer 5

The config settings are as follows

    .config(['$httpProvider', function ($httpProvider: ng.IHttpProvider) {
        $httpProvider.interceptors.push(AuthenticationInterceptor.Factory);
    }])

and your actual class should look as follows

module Common {
'use strict';

export class AuthenticationInterceptor {

    private static _instance: AuthenticationInterceptor;

    public static Factory($q: ng.IQService) {
        AuthenticationInterceptor._instance = new AuthenticationInterceptor($q);

        return AuthenticationInterceptor._instance;
    }

    constructor(private $q: ng.IQService) {
    }

    //Method name should be exactly "response" - http://docs.angularjs.org/api/ng/service/$http
    public response(response) {
        var self = Common.AuthenticationInterceptor._instance;

        console.log(response);
        return response || self.$q.when(response);
    }

    public responseError(rejection) {
        var self = Common.AuthenticationInterceptor._instance;

        console.log(rejection.status);
        if (rejection.status === 401) {
        }

        // Otherwise, default behavior
        return self.$q.reject(rejection);
    }
}

It is necessary to get the instance of the class with the full namespace because when receiving a callback from Angular 'this' is undefined.