如何为所有角度控制器固定或设置轨道样式的before_filter？

Question

I'm using angularjs for the front end and rails + devise for authentication on the backend.

On the front end I have added a responseInterceptor to redirect to the /#/sign_in page upon any 401 response from any xhr request and display a growl style pop-up message using toastr.

App.config(['$httpProvider', function ($httpProvider) {
  $httpProvider.responseInterceptors.push('securityInterceptor');
}]);

App.factory('securityInterceptor', ['$injector', '$location', '$cookieStore', function ($injector,$location,$cookieStore) {

  return function(promise) {
    var $http = $injector.get('$http');
      return promise.then(null, function(response){
        if (response.status === 401) {
          $cookieStore.remove('_angular_devise_user');
          toastr.warning('You are logged out');
          $location.path('/#/sign_in');
        }
      });
    };
});

My problem is, when I click on a page that loads several xhr requests during the controllers initialization, for example:

var products = Product.query();
var categories = Category.query();
var variations = Variation.query();

These are needed for various navigation components and they all fire off in parallel, resulting in several duplicate growl-style messages.

Is there a way to make angular quit on the first 401 and stop execution of the rest of the controller from within the interceptor? In a traditional rails app, there would be a "before_filter" that stops regular execution, preventing the page and queries from loading... what's the best way to do this in angular?

Answer 1

I've been pondering about this problem for my own apps too. A sketch of my thoughts (NOT REAL IMPLEMENTATION, SO BEWARE):

A userData service keeps track of whether the user is logged in + other information (eg user name, real user name etc):

App.service("userData", function() {
    var currentData = {
        loggedIn: false
    };

    function getCurrent() {
        return currentData;
    }

    // called when the user logs in with the user data
    function loggedIn(userData) {
        // the object is REPLACED to avoid race conditions, see explanation below
        currentData = angular.extend({loggedIn: true}, userData);
    }

    return {
        getCurrent: getCurrent,
        loggedIn: loggedIn
    };
});

The interceptors keep track of the currentData . If an interceptor receives HTTP 401 and the loggedIn flag is true , it changes the flag to false and redirects to the login view. If an interceptor receives HTTP 401 and the loggedIn flag is false , it does nothing besides rejecting the request, because another interceptor has done the view redirection.

When the user logs in, the currentData is replaced, so as to avoid situations with delayed responses (eg call1 and call2 are initiated, call1 responds 401; call2 also results in 401, but the delivery of the actual response is delayed; then the user logs in again; then call2 receives its 401; the second 401 should not overwrite the current state)

App.config(["$provide", "$httpProvider", function($provide, $httpProvider) {
    $provide.factory("myHttpInterceptor", ["$q", "userData", "$cookieStore", "toastr", "$location",
        function($q, userData, $cookieStore, toastr, $location) {
            return {
                request: function(config) {
                    config.currentUserData = userData.getCurrent();
                    return config;
                },
                responseError: function(rejection) {
                    if( rejection && rejection.status === 401 && rejection.config && rejection.config.currentUserData && rejection.config.currentUserData.loggedIn ) {
                        rejection.config.currentUserData.loggedIn = false;
                        $cookieStore.remove('_angular_devise_user');
                        toastr.warning('You are logged out');
                        $location.path('/#/sign_in');
                    }
                    return $q.reject(rejection);
                }
            };
        }
    ]);

    $httpProvider.interceptors.push("myHttpInterceptor");
});

Also note I am using the newer way to register interceptors, as $httpProvider.responseInterceptors seems to be deprecated.