Where should I inject Bearer tokens into $http in AngularJS? Where should I inject Bearer tokens into $http in AngularJS? angularjs angularjs

Where should I inject Bearer tokens into $http in AngularJS?


A great way to solve this problem is to create an authInterceptor factory responsible for adding the header to all $http requests:

angular.module("your-app").factory('authInterceptor', [  "$q", "$window", "$location", "session", function($q, $window, $location, session) {    return {      request: function(config) {        config.headers = config.headers || {};        config.headers.Authorization = 'Bearer ' + session.get('token'); // add your token from your service or whatever        return config;      },      response: function(response) {        return response || $q.when(response);      },      responseError: function(rejection) {        // your error handler      }    };  }]);

Then in your app.run:

// send auth token with requests$httpProvider.interceptors.push('authInterceptor');

Now all requests made with $http (or $resource for that matter) will send along the authorization header.

Doing it this way instead of changing $http.defaults means you get way more control over the request and response, plus you can use a custom error handler too or use whatever logic you want to determine whether the auth token should be sent or not.