csrf - Using AngularJs in order to retrieve a header from the response and set it on all requests

Question

I am trying to use Angularjs in order to retrieve the csrf token from one of the response's header and set it on all requests.

I have managed to read it from the response using a response interceptor as follows:

 .factory('csrfResponseInterceptor', [function () {
        return{
            response: function(response){
                console.log(response.headers('X-CSRF-TOKEN'));
                return response;
            }
        }
    }])

but I am not sure how to set it on all requests afterwards.

Somehow I would need to set it using the $httpProvider service as follows:

$httpProvider.defaults.headers.common['X-CSRF-TOKEN'] = response.headers('X-CSRF-TOKEN');

I haven't managed to inject the $httpProvider into the interceptor though.

Can someone please provide advice on a best practice?

edit: This is how I register my interceptors:

.config(['$httpProvider', function ($httpProvider) {
        $httpProvider.defaults.xsrfHeaderName = 'X-CSRF-TOKEN';
        $httpProvider.interceptors.push('httpResponseInterceptor', 'csrfResponseInterceptor');
    }])

Answer 1

I think you can do it like this in config function:

.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.xsrfHeaderName = 'X-CSRF-TOKEN';
    $httpProvider.interceptors.push(function() {
        return {
            response: function(response) {
                $httpProvider.defaults.headers.common['X-CSRF-TOKEN'] = response.headers('X-CSRF-TOKEN');
                return response;
            }
        }    
    });
}]);