Why does the POST request return nothing after adding localstorage to the backbone model?

Question

JavaScript

Good afternoon! I am studying backbone + jquerymobile, on the server I use django rest framework. The following problem arose:
1. [code without comments] When I send a login/password combination to the server, I receive a token in the format { token: "mytoken"} in response from the server . I can view it by executing console.log(response.token)
2. Next, I need to save this token in localstorage, so that later I can transfer it to the header (using the overridden backbone.sync)
3. [code with comments] I added localstorage to the model and in view I assign it to the access_token variable. Now when I submit my username/password no token is returned and console.log(response.token) returns undefined. The problem is not in the new backbone.sync method, because if the token is passed explicitly to the view, then everything works as it should.
What am I doing wrong? Who can explain why after adding localstorage I don't get a token. Or how else can you pass the received token to the header?
My Model:

var User = Backbone.Model.extend({
    defaults: {
        username: "",
        password: ""
    },

    url: appConfig.baseURL + "api-token-auth/",
    //localStorage: new Store('srt')
});

View piece:

user.save({}, { 
    success: function(model, response) {
      if (typeof response.token === "undefined") {
        console.log('Token is undefined');
      } else {
        console.log('Token is exists');
        //localStorage.setItem('access_token', response.token);
        window.workspace.navigate('#', { trigger: true});
        return true;
    }},

    error: function(model, response) {
      var error = JSON.parse(response.responseText)
      console.log('Error: ' + error.detail);
    }

Overridden Backbone.sync:

Backbone._sync = Backbone.sync
Backbone.sync = function(method, model, options) {
    options = $.extend({
        crossDomain: true
        , xhrFields: {
            withCredentials: true
        }
        , beforeSend: function(xhr){
            xhr.setRequestHeader('Authorization', 'Token ' + localStorage.getItem('access_token'));
        }
    }, options);

    return Backbone._sync(method, model, options);
}

Answer 1

if( model && (method === 'create' || method === 'update' || method === 'patch') ) {
        options.contentType = 'application/json';
       options.data = JSON.stringify(options.attrs || model.toJSON());
}

in the redefinition of Backbone.sync insert at the very top.

Answer 2

user.save({}, { 
    success: function(response) {
      if (response.token) {
      localStorage.setItem('access_token', response.token);
      window.workspace.navigate('#', { trigger: true});
    }},
    error: function(response) {
      var error = JSON.parse(response.responseText)
    }

try like this

Backbone._sync = Backbone.sync
Backbone._sync = function(method, model, options) {
    options = $.extend({
        crossDomain: true
        , xhrFields: {
            withCredentials: true
        }
        , beforeSend: function(xhr){
            xhr.setRequestHeader('Authorization', 'Token ' + localStorage.getItem('access_token'));
        }
    }, options);

    return Backbone._sync(method, model, options);
}

you had a mistake

Answer 3

In general, the problem was that it was not necessary to redefine backbone.sync specifically for login. I made a separate sync for the user model, overridden for everything else and it all worked.