Catching 403 errors in Angular and showing a pop up

Issue

On our site, I get into this predicament where you basically transfer a project over to another user. When that happens, if the original user tries to view the project he/she just transferred, we give a 403 back because they no longer are the owner of the project. I started to look up interceptors in Angular. I hooked up the responseError to just see if it gets called on the 403 like so

.config(($httpProvider) => {
        $httpProvider.interceptors.push(function() {
            return {
                responseError: function(rejection) {
                    console.log("bad response");
                    return rejection;
                }
            }
        });
    });

So my "bad response" gets called and everything, but I was not sure how I could show a modal view or something at this point that shows the error to the user since this 403 response actually happens on a few of our different resources, not just projects.

Solution

If i understand correctly you want to show the error dialog only for some http calls not every call that goes through you interceptor. You could probably try this:-

Set a config for your http calls say handleError:true.

$http.get('myurl', {handleError:true})....


$http.post('myurl',data, {handleError:true})....

etc..

and in your interceptor look for that specific config setting to display the error:-

   $httpProvider.interceptors.push(function() {
        return {
            responseError: function(rejection) {
                console.log("bad response");
                if(rejection.config.handleError && rejection.status === 403){
                    //show error dialog
                }
                return rejection;
            }
        }
    });

Also you could possibly send the status code that needs to be handled as well.

 $http.get('myurl', {handleStatus:[403,...]})....

and

  $httpProvider.interceptors.push(function() {
        return {
            responseError: function(rejection) {
                if((rejection.config.handleStatus || []).indexOf(rejection.status) > -1){
                    //show error dialog. probably you could show it in a $timeout to make this async.
                }
                return rejection;
            }
        }
    });

Answered By - PSL