CODEWITHSUNDEEP
ember.js
MChan
MChan

Reputation: 7162

Implementing custom ajax calls when loading data in model

In my Emberjs application I have an Employee model which I should load through a REST Get API call, where I have to authenticate the API first for a token then start loading the data, I know how to do this easily using JQuery but not sure how I can implement this in EmberJS, so I will appreciate it so much if anyone can instruct me how to do so.

Below is the JQuery code I use for authentication, extracting the employees data, as well as my EmberJS model code

Thanks

Authentication:

 $.ajax
  ({
    type: "POST",
    url: "http://portal.domainname.com/auth",
    dataType: 'json',
    async: false,
    data: JSON.stringify({ 
        Login: "[email protected]", 
        Password : "test"
    }),
    success: function(data) {
        console.log(data); //Here I get the token needed for further calls...
    },
    error: function(xhr, error){
        console.debug(xhr); console.debug(error);
    } 
});

Calls to load employees data:

$.ajax   ({
    type: "GET",
    url: "http://portal.domainname.com/employees",
    dataType: 'json',
    async: false,
    beforeSend: function (xhr) {
        xhr.setRequestHeader ("Token", "0000000-0000-0000-0000-00000000");
    },
    success: function(data) {
        console.log(data);
    },
    error: function(xhr, error){
        console.debug(xhr); console.debug(error);
    }  });

EmberJS Model

App.Store = DS.Store.extend({
  revision: 11
});

App.Employee = DS.Model.extend({
  employeeID:             DS.attr('string'),
  employeeName:        DS.attr('string')
});

App.Store.reopen({
 adapter: 'DS.RESTAdapter'
});

Upvotes: 3

Views: 1318

Answers (4)

Aaron Storck
Aaron Storck

Reputation: 886

A very real & viable solution is to avoid using EmberData and just use ajax the way you already know. Take a look at this tutorial from a founder of Discourse (which uses Ember without Ember Data):

http://eviltrout.com/2013/03/23/ember-without-data.html

Upvotes: 1

Martin
Martin

Reputation: 2300

You can add headers to all Ember AJAX requests like this:

App.Store = DS.Store.extend({
  revision: 13,
  adapter: DS.RESTAdapter.extend({
    ajax: function(url, type, hash) {
      if (!hash) {
        hash = {};
      }
      hash.beforeSend = function(xhr) {
        xhr.setRequestHeader("Authorization", "Token " + window.sessionToken);
      };
      return this._super(url, type, hash);
    }
  })
});

I use this code in production.

Upvotes: 3

Amiel Martin
Amiel Martin

Reputation: 4814

Try something like this:

App.ApplicationAdapter = DS.RESTAdapter.extend({
  setHeaders: function() {
    this.set('headers', { "Token": "0000000-0000-0000-0000-00000000" });
  }.on('init');
});

I think you'll need ember-data-1.0.0-beta.x for this to work.

Upvotes: 0

Martin Stannard
Martin Stannard

Reputation: 811

As a hack you could use something like https://api.jquery.com/jQuery.ajaxPrefilter/ for adding the header with the token to every call. However, I think you should use a dedicated auth library for this.

Also your store has revision: 11 - that is for an old version I believe.

Upvotes: 0

Related Questions