Angular - Asynchronous operation with request interceptor

Question

I have my request interceptor like below :

var requestFactory = angular.module('queryParamsModule', [])
        .factory('headerInterceptor', function($injector) {

          return {
            request: requestInterceptor
          };

          function requestInterceptor(req) {
              var accessToken;
              $injector.get('tokenService').accessToken().then(function(res) {
                accessToken = res.access_token;
                console.log(accessToken);  >>>>> accessToken is populated fine!
                req.headers = _.extend({
                  'Authorization': 'Bearer ' + accessToken
                }, req.headers);
              }, function(e) {
                // error
              });

            return req;
          }

        })
        .config(function($httpProvider) {
          $httpProvider.interceptors.push('headerInterceptor');
        });

      return queryParamsFactory;

The issue here is, angular doesnt wait for the Authorization Header to be added in request and pushes the interceptor before adding Authorization header.

Is there a way I can make my header interceptor part of the promise which is resolved after accessToken promise is complete?

Estus Flask · Accepted Answer · 2017-02-03 18:30:30Z

3

As the manual says,

request: interceptors get called with a http config object. The function is free to modify the config object or create a new one. The function needs to return the config object directly, or a promise containing the config or a new config object.

So it should be:

  function requestInterceptor(req) {
      return $injector.get('tokenService').accessToken().then(function(res) {
        ...
        return req;
      }, function(e) { ... });
  }

answered Feb 3, 2017 at 18:30

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

theConstructor Over a year ago

Worked like charm. Thanks much!

Collectives™ on Stack Overflow

Angular - Asynchronous operation with request interceptor

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related