ember-cli solving rails csrf problems

application.js

import Ember from 'ember';

export default Ember.Route.extend({

//a = Charity.__container__.lookup('controller:application')
//a.get('csrfService')
//a.get('csrfService').token.authenticity_token
//or
//a.csrfService
//a.csrfService.token.authenticity_token

 beforeModel: function(){
   //return this.csrf.fetchToken();
   return this.csrfService.fetchToken();
  }

});

csrf-service.js

// place in initializers/csrf-service.js


// in the console fetch it with
//Charity.__container__.lookup('service:csrf')
//http://discuss.emberjs.com/t/dependency-injection-across-initializers/6089/4

export function initialize(container, application) {
  application.inject('route', 'csrfService', 'service:csrf');
  application.inject('controller', 'csrfService', 'service:csrf');
}

export default {
  name: 'csrf-service',
  initialize: initialize
};

csrf.js

// place in services/csrf.js

import Ember from 'ember';

// in the console fetch it with
//Charity.__container__.lookup('service:csrf')

export default Ember.Object.extend({

  
  fetchToken: function() {
    var _this = this;
 
    return Ember.$.ajax({
      url: 'api/csrf'
    }).done( function(data) {
       console.log('token', data);
       console.log('the csrf', data.authenticity_token);
       //var newToken =  jqXHR.getResponseHeader('X-CSRF-Token');
        //console.log('newToken', newToken);
        
      // TODO: Error check
      var param = Object.keys(data)[0];
       console.log('param key name:', param);
      _this.set('token', data);
      _this.set('param', param);
       console.log('using this get', _this.get('token').authenticity_token );
    },this.setPrefilter.bind(this) );

  },  //closes fetchToken

  setPrefilter: function() {
    var token = this.get('token').authenticity_token;
    console.log('prefilter token', token);
    
     var preFilter = function(options, originalOptions, jqXHR) {
        console.log('jqxhr', jqXHR);
        console.log('token afterjqxhr', token);
      return jqXHR.setRequestHeader('X-CSRF-Token', token );
      };
     Ember.$.ajaxPrefilter(preFilter);
  },


/*
   setPrefilter: function() {
     //var _this = that;
     var token = this.get('token').authenticity_token;
     console.log('prefilter token', token);

     Ember.$.ajaxPrefilter(function(options, originalOptions, xhr) {
       console.log('the xhr', xhr);
       console.log('ajax prefilter', token);
        if (token) {
       console.log('if token yes then ajax prefilter is:', token);
         var xx = xhr.setRequestHeader('X-CSRF-Token', token);
         console.log('setRequestHeader', xx);
         return xx;
        }
      });
    
   },
*/
   csrfTokenChanged: function() {
     this.setPrefilter();
     var token = this.get('token').authenticity_token;
     console.log('csrf  token chnaged ', token);

     console.log('token changed' );
   }.observes('token')

});

login.js

// route/login.js

import Ember from 'ember';

export default Ember.Route.extend({

  actions: {
    
    loginUser: function( ) {
      var self = this;
      
      var loginController = this.controllerFor('login');
      var email = loginController.get('email');
      var password = loginController.get('password');
  
      console.log('login token', this.csrfService.token.authenticity_token);
      
      var login = Ember.$.ajax({
        url: "/api/sessions.json",
         //url: "/api/sign_in.json",
        //url: "/users/sign_in.json",
        dataType: "json",
        type: "POST",
        //headers: {  'X-CSRF-Token': this.csrfService.token.authenticity_token },
        //beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', self.csrfService.token.authenticity_token) },
        data: {email: email, password: password} 
      });

      login.then(function(data){ 
        console.log('data', data);
        var loaded;
        //loaded = self.get('store').push('user', data.user);
        
        //console.log('push', loaded);
        //console.log('la', loaded.get('username') );
        
        //use pushPayload for data that is not yet normalised
        loaded = self.get('store').pushPayload('user', data);
        //loaded = self.get('store');
        //loaded.pushPayload('user', data);
     
         //alert(JSON.stringify(loaded.id));
        console.log('pushPayload', loaded);
        
        console.log('using store.find:', self.get('store').find('user', data.user.id) );
        
        //finding user this way doesn't works and we can't fetch a username there after
       var  n =  self.get('store').find('user', data.user.id);
        console.log('username b4 resolving promise:', n.get('username') );  //undefined in console
    
        var a = n.then(function(user){ console.log('log username:', user.get('username') ); });
        console.log('user  after then:', a );  //give an empty promise
        
        //finding user this way works and we can fetch a username there after
        //getById gets a record by type and ID without triggering a fetch
        var p = self.get('store').getById('user', data.user.id);
        console.log('using store.getById:', p);
         //only works when we push data into the store using push rtns null with pushPayload
        //https://github.com/emberjs/data/commit/995b366c36c828a0f04c6ba9b978aa258238ce04
        console.log('username after getById:', p.get('username') );
        
        console.log('authToken:', data.user.authentication_token);
        var b = self.controllerFor('application');
        b.set('authToken', data.user.authentication_token);
        
        //this function redirects the user after successful loggedin to the link they wanted to access or to home page
        self.controllerFor('login').loginSuccessful();
      });
      
    } //closes loginUser
    
  }//closes action

});