web-dev-qa-db-de.com

Anforderungsheader im Backbone hinzufügen

Mein Server hat eine manuelle Berechtigung. Ich muss den Benutzernamen/das Passwort meines Servers in meine Backbone-Anfrage eingeben, damit sie ausgeführt werden kann. Wie kann ich das machen? Irgendwelche Ideen? Vielen Dank

jquerybackbone.js
50
jongbanaag

Modelle in Backbone rufen Daten mit den Methoden fetch, save und destroy ab, aktualisieren und zerstören sie. Diese Methoden delegieren den tatsächlichen Anforderungsteil an Backbone.sync. Unter der Haube alle Backbone.sync erstellt gerade eine Ajax-Anfrage mit jQuery. Um Ihre Basis-HTTP-Authentifizierung einzubeziehen, haben Sie mehrere Möglichkeiten.

fetch, save und destroy akzeptieren alle einen zusätzlichen Parameter [options]. Diese [options] ist einfach ein Wörterbuch mit jQuery-Anforderungsoptionen, die in den ausgeführten jQuery-Ajax-Aufruf einbezogen werden. Dies bedeutet, dass Sie leicht eine einfache Methode definieren können, die die Authentifizierung anfügt:

sendAuthentication = function (xhr) {
  var user = "myusername";// your actual username
  var pass = "mypassword";// your actual password
  var token = user.concat(":", pass);
  xhr.setRequestHeader('Authorization', ("Basic ".concat(btoa(token))));
}

Und füge es in jeden fetch, save und destroy Aufruf ein, den du machst. Wie so:

 fetch({
  beforeSend: sendAuthentication 
 });

Dies kann zu Wiederholungen führen. Eine andere Möglichkeit könnte sein, das Backbone.sync-Methode, kopieren Sie den Originalcode und fügen Sie einfach die Option beforeSend in jede jQuery-Ajax-Anforderung ein, die gestellt wird.

Hoffe das hilft!

54
shanewwarren

Der einfachste Weg, um Request-Header in Backbone.js hinzuzufügen, besteht darin, sie einfach als Parameter an die Fetch-Methode zu übergeben, z.

MyCollection.fetch( { headers: {'Authorization' :'Basic USERNAME:PASSWORD'} } );
43
tmaximini

Eine Möglichkeit könnte darin bestehen, das jQuery-Ajax-Setup zu verwenden. Alle Backbone-Anforderungen verwenden schließlich das zugrunde liegende jQuery-Ajax. Der Vorteil dieses Ansatzes ist, dass Sie nur eine Stelle hinzufügen müssen.

$.ajaxSetup({
    headers: { 'Authorization' :'Basic USERNAME:PASSWORD' }
});

Edit 2nd Jan 2018 Für komplexe Webanwendungen ist dies möglicherweise nicht der beste Ansatz, siehe Kommentare unten. Lassen Sie die Antwort hier als Referenz.

29
Andy Polhill

Sie können die Backbone-Synchronisationsmethode überschreiben.

#coffeescript
_sync = Backbone.sync
Backbone.sync = (method, model, options) ->
    options.beforeSend = (xhr) ->
        xhr.setRequestHeader('X-Auth-Token_or_other_header' , your_hash_key)
        #make sure your server accepts X-Auth-Token_or_other_header!!
    #calling the original sync function so we only overriding what we need
    _sync.call( this, method, model, options )
18
zzart
Backbone.$.ajaxSetup({
    headers: {'Authorization' :'Basic USERNAME:PASSWORD'}
});

Dieser Code setzt die Header auf Backbone ajax, sodass sie bei jeder Backbone.sync gesendet werden. Sie können bei jedem Synchronisierungsaufruf Header senden, ohne xhr.setRequestHeader Zu verwenden.

Sie müssen also nicht jedes Mal Folgendes tun:

MyCollection.fetch({ headers: {'Authorization' :'Basic USERNAME:PASSWORD'} } );

Sie können es einfach tun

MyCollection.fetch();

Vielleicht ist es eine Art Hack, aber es funktioniert perfekt für mein System.

11
Roman Paraschak

Mein Ansatz für so etwas wäre, die Synchronisationsmethode zu überschreiben, um den Header vor der Anforderung hinzuzufügen. In dem Beispiel konnte man sehen, dass ich ein Backbone.AuthenticatedModel, das reicht von Backbone.Model.

Dies hat Auswirkungen auf alle Methoden (GET, POST, DELETE usw.).

Backbone.AuthenticatedModel = Backbone.Model.extend({
    sync: function(method, collection, options){
        options = options || {};
        options.beforeSend = function (xhr) {
            var user = "myusername";// your actual username
            var pass = "mypassword";// your actual password
            var token = user.concat(":", pass);
            xhr.setRequestHeader('Authorization', ("Basic ".concat(btoa(token))));
        };
        return Backbone.Model.prototype.sync.apply(this, arguments);
    }

});

Dann müssen Sie einfach das Modell erweitern, das Sie für die Authentifizierung benötigen, aus dem Backbone.AuthenticatedModel Sie haben erstellt:

var Process = Backbone.AuthenticatedModel.extend({
    url: '/api/process',

});
6
sebastian-greco
Object.save(
  {'used': true}
  {headers: {'Access-Token': 'access_token'}}
)
4
Oleksandr Mishyn

Erstellen Sie eine benutzerdefinierte Synchronisierungsmethode, die die Aufrufe von Backbone.sync abfängt, Ihre Autorisierungsheader einfügt und alles andere durchläuft:

    REPORTING_API_KEY = 'secretKeyHere';
    CustomSync = function(method, model, options) {
        options.headers = {
            'Authorization' : 'Bearer ' + REPORTING_API_KEY
        };
        return Backbone.sync(method, model, options);
    };

Überschreiben Sie dann die Synchronisation Ihres Modells mit dieser:

    MyModel = Backbone.Model.extend({
        urlRoot: '/api/',
        sync: CustomSync
    });
2
ehed

Versuchen Sie es zu benutzen. Wir können entweder verwenden

beforeSend: function(xhr) {
    xhr.setRequestHeader('X-CSRFToken', csrf_token);
},

oder

headers: {
    "X-CSRFToken": csrf_token
},

Aber ich würde die erste Option empfehlen (beforeSend).

Hier ist das Arbeitscode-Snippet in meinem Fall.

var csrf_token = this.getCSRFToken();
self.collection.fetch(
{
    beforeSend: function(xhr) {
        xhr.setRequestHeader('X-CSRFToken', csrf_token);
    },
    // headers: {
    //     "X-CSRFToken": csrf_token
    // },
    data: {
        "mark_as": "read"
    },
    type: 'POST',
    success: function () {
        if (clickLink) {
            window.location.href = clickLink;
        } else {
            self.unreadNotificationsClicked(e);
            // fetch the latest notification count
            self.counter_icon_view.refresh();
        }
    },
    error: function(){
        alert('erorr');
    }
});
1
Umar Asghar