AngularJs: how to hold all the $http request if its thrown unauthorised request error refresh token and resume all the request

Question

i have developed single page application in angularjs. i have implemented the refresh token mechanism. refresh token suppose to refresh every 30 minutes. I am trying to handle refresh token in responseError of interceptor. I m trying to hold request if it returns 401 unauthorised error. Is there any mechanism to hold all the request once it return 401 error then refresh token and resume all request with new token.

Is it right way to handle the refresh token, here is sample code

$provide.factory('httpTokenInterceptor', function ($q, $injector, $cookies) {
return {
    // On request sending
    request: function (config) {
        config.headers = config.headers || {};

        // get this data from $cookies
        var globals = $cookies.getObject('globals') || {};
        //console.log(globals);
        if (globals.authData)
            config.headers.Authorization = 'Bearer ' + globals.authData.access_token;

        return config;
    },

    // On response failure
    responseError: function (rejection) {
        console.log('AuthTokenHttpInterceptor responseError');
        console.log(rejection);
        if (rejection.status === 401) {
            //hold current and all pending request
            var aService = $injector.get('authenticationService');
            aService.getRefreshToken().then(function(response) {

                //need to resume all the request here

                deferred.resolve(response);
            });
            return deferred.promise;
        }
        return $q.reject(rejection);
    }
};
});

score 0 · Answer 1 · answered Apr 14 '17 at 13:23

In short, you don't want to hold up any of your HTTP calls like that.

Your solution will go and refresh your token after one of your HTTP calls already failed. Also, just to be clear, your code is adding Authorization header even on HTTP calls that are getting resources like HTML templates. If you don't want to do this, then you should restrict that as well.

For one solution, check out this link. It doesn't use any particular library for handling JWT tokens, but you will have to create a wrapper around this implementation to use it wherever you need to do a HTTP call.

My suggestion (and personal preference when handling JWT tokens) is using the angular-jwt library. It's really easy to set up and you can check it out here.

There more complex libraries like auth0, which can do a lot of other stuff, and can be used in conjuction with angular-jwt library. Check out this link to see how to handle token refreshing both prior to a HTTP call and on page refresh.

Hope this helps.

score 0 · Answer 2 · answered Aug 29 '17 at 07:12

You can hold requests and resume them using AngularJS Interceptors.

authInterceptor.$inject = ['$q', '$rootScope'];
function authInterceptor($q, $rootScope) {
        return {
            request: function(config) {
                var deferred = $q.defer();

                $rootScope.$watch('continue', function(value) {
                    if(value === true)
                        deferred.resolve(config);
                });

                return deferred.promise;
            }
        };
    }

In the above example all of the requests hold until $rootScope.continue becomes true. Otherwise they will wait forever.

AngularJs: how to hold all the $http request if its thrown unauthorised request error refresh token and resume all the request

2 Answers2