Skip to content

Customizing your Authorization Header

Bill Heaton edited this page Oct 13, 2015 · 11 revisions

HTTP Authorization Request Header

Problem

My applicaiton uses authentication that is not consitent with the default setup for sending HTTP Authorization with window.fetch

Solution

The addon provides an authorization mixin that is used by the adapter to manage the HTTP Authorization request-header credentails/token.

See: Authorization Mixin.

The example below should work for using ember-simple-auth.

In your Ember CLI app use ember g mixin authorization; then configure the authorizationHeaderStorageKey used in your localStorage and also redefine the computed property authorizationCredential which reads your stored credentials/token value.

//app/mixins/authorization.js

import Ember from 'ember';
import AuthorizationMixin from 'ember-jsonapi-resources/mixins/authorization';

export default AuthorizationMixin.reopen({
  authorizationHeaderStorageKey: 'ember_simple_auth:session',
  authorizationCredential: Ember.computed({
    get(key) {
      key = this.get('authorizationHeaderStorageKey');
      const simpleAuthSession = JSON.parse(window.localStorage.getItem(key));
      return 'Bearer ' + simpleAuthSession.secure.access_token;
    }
  })
});

The AuthorizationMixin is already included in the ApplicationAdapter, so you may also customize your adapter as needed:

//app/adapters/proposal.js

import ApplicationAdapter from './application';
import config from '../config/environment';

export default ApplicationAdapter.extend({
  type: 'proposal',
  url: config.APP.API_HOST +  'proposals'
});

Discussion

The Mixin can use localStorage or sessionStorage and has properties to lookup the credentials/token in a computed property authorizationCredential.

The adapter method fetchAuthorizationHeader uses two properties for including the Authoriztion Header in your fetch request: authorizationCredential and authorizationHeaderField. You have two options to customize to send credentials with your requests.

  1. Reopen the mixin as in the above solution
  2. In your adapter re-define the fetchAuthorizationHeader method
Clone this wiki locally