Handle Angular 401 responses

Question

I have simple api and a authorization point

when i request to api i get a 401 if the token is invalid (token loses validity past five minutes).

i know i can intercept 401 for example with

app.factory("HttpErrorInterceptorModule", ["$q", "$rootScope", "$location",
    function($q, $rootScope, $location) {
        var success = function(response) {
            // pass through
            return response;
        },
            error = function(response) {
                if(response.status === 401) {
                    // dostuff
                }

                return $q.reject(response);
            };

        return function(httpPromise) {
            return httpPromise.then(success, error);
        };
    }
]).config(["$httpProvider",
    function($httpProvider) {
        $httpProvider.responseInterceptors.push("HttpErrorInterceptorModule");
    }
]);

but i want capture and queue the request and show a login form if is success then change the token (it's a header) and execute request again

Answer 1

You can use $httpInterceptor in slightly another way. If you want to redirect user after login to page where user actually failed you need to cache failed request in some service and then redirect user somewhere after login (I beleive in logic connected to your login).

But you may need to have some test endpoint to protect your controllers from unrestricted access, you might want to use resolve https://thinkster.io/egghead/resolve/ So in this case you will receive error connected with restricted access to proctedted endpoint but not to your page.

To solve this problem I used marker param (or header) to find out where I should redirect user after login.

Here is example of your httpInterceptor.

angular.factory('httpInterceptor', function ($q, $rootScope, $log, someService) {
    return {
        request: function (config) {
            return config || $q.when(config)
        },
        response: function (response) {
            return response || $q.when(response);
        },
        responseError: function (response) {
            if (response.status === 401) {
                //here I preserve login page 
                someService
                   .setRestrictedPageBeforeLogin(
                            extractPreservedInfoAboutPage(response)
                    )
                $rootScope.$broadcast('error')
            }
            return $q.reject(response);
        }
    };
})
.config(function ($httpProvider) {
    $httpProvider.interceptors.push('httpInterceptor');
});