Ember data adapter headers are not included in the request

Question

Based on https://guides.emberjs.com/v2.11.0/models/customizing-adapters/#toc_headers-customization,

import DS from 'ember-data';
import config from '../config/environment';
import DataAdapterMixin from 'ember-simple-auth/mixins/data-adapter-mixin';

export default DS.JSONAPIAdapter.extend(DataAdapterMixin, {
    session: Ember.inject.service(),

    headers: Ember.computed({
        get() {
            let headers = {};
            this.get('session')
                .authorize('authorizer:custom', (headerName, headerValue) => {
                    headers[headerName] = headerValue;
                });
            return headers;
        }
    }),

    queryRecord(modelName, query) {
        return Ember.$.getJSON(`${config.host}/users/me`);
    }
});

I have defined a headers property inside the adapter, however, then the request send to the server there is no Authentication in the header (as a result I am keep getting 401 Unauthorized error).

I have tried to log the headers property in queryRecord method and it does display the correct header information.

Answer 1

I think the problem is the computed prop cache .

You can do :

headers: Ember.computed('session.isAuthenticated', {
        get() {
            let headers = {};
            this.get('session')
                .authorize('authorizer:custom', (headerName, headerValue) => {
                    headers[headerName] = headerValue;
                });
            return headers;
        }
    }),

Or

headers: Ember.computed({
        get() {
            let headers = {};
            this.get('session')
                .authorize('authorizer:custom', (headerName, headerValue) => {
                    headers[headerName] = headerValue;
                });
            return headers;
        }
    }).volatile(),