错误回调后重新调用Backbone.Sync方法

Question

I am working on an application where if our Bearer token has expired and we get a 401 back from the server. We want to call an endpoint /api/newToken and set that new bearer token to the cookie (which is later added to the headers) and then re call the URL that was being called when the error (401 status) occurred.

We overwrote the backbone sync method

var sync_mixin = {
        // `preSync` is a useful hook from which events can be published,
        //      and options / model may be modified.
        preSync: function (method, model, options) {},

        // override sync to:
        //  - call preSync first
        //  - because tastypie and backbone disagree on whether delete should have trailing slash
        sync: function (method, model, options) {
            model.preSync(method, model, options);
            options = options || {};
            options.headers = getAuthHeaders()

            // Add trailing slash to backbone model views
            var _url = _.isFunction(model.url) ?  model.url() : model.url;
            // Missing the case where there is a query string on a detail view here: /v7.0/<resource>/<id>?key=val
            _url += _url.charAt(_url.length - 1) == '/' || _url.indexOf('?') != -1 ? '' : '/';

            options = _.extend(options, {
                url: _url,
                model: model
            });

            if (method.toLowerCase() === 'delete') {
                if (!options.url) {
                    options.url = _.result(model, 'url').replace(/\/$/, "") + '/';
                }
            }

            return Backbone.sync.apply(this, arguments);
        }
    };

    Backbone.Model = Backbone.Model.extend(sync_mixin);

Ideally I want to handle the error in once place (and not within each model file). What I am trying to accomplish is when I get the error on sync, call the api endpoint get the new token, set it to the cookie and re call the original sync method with the new cookie as the token. Here is what I have tried, but I am running into maximum call stack errors. I added this code inside the sync function above

            options.error = function(xhr, status, thrown) {
              if(xhr.status === 401 || xhr.status === 403){
                  $.cookies.set("auth-token", '6fe36b69cdac549339850a5aa2f148b470dc2e0e');
                  Backbone.sync.apply(this.model, arguments);
              }
            }

Any suggestions on how to resolve this issue? I can get anything else that is needed.

Answer 1

I got this working. Tte max call stack error was due to me accidentally adding request back to the options which made a recursive call.

Here is my code that allows for the recall of sync

    var errorHandler = options.error;
    options.error = function(xhr) {
      var errorHandlerArgs = arguments;
      if ((xhr.status === 401 || xhr.status === 0) && $this.ajaxTried < 3) {
          $this.ajaxTried++;
          //call refresh_bearer/ URL 
          $.ajax({
            url: "/api/refresh_bearer/",
            headers: args[2].headers
          }).done(function (data) {
            args[2].headers = getAuthHeaders()
            Backbone.sync.apply($this, args);
          });
      } else {
          $this.ajaxTried = 0;
          errorHandler.apply($this, errorHandlerArgs);
      }
    };