angular js add request parameter on every http request $http

Question

I'd like to use angular $http to interact with api, but I need to store my auth token to $http so that in every request wether post get put delete, I want the token to be present, also I have seen people place tokens in the header , I know how to place it in the header, but I'm not sure if its a good practice to put tokens in the header , here is my config :

config(['$stateProvider', '$urlRouterProvider','$http', function($stateProvider, $urlRouterProvider, $http) {
  $urlRouterProvider.otherwise("/view1");

}]);

if can help, try to use Restangular it's an amazing library! You can configure Rectangular one time and you have in all your calls the token — gianlucatursi
– gianlucatursi, Commented Aug 30, 2016 at 12:54
You inject $http in your config? That shouldn't be possible. — gyc
– gyc, Commented Aug 30, 2016 at 13:41

gyc · Accepted Answer · 2016-08-30 13:35:09Z

To communicate with an API that requires token authentification, you need to set up an interceptor.

In your config file:

function config(..., $httpProvider) {
    $httpProvider.interceptors.push('authInterceptor');
    ...
}
angular
    .module('app')
    .config(config);

authInterceptor is a factory that will take care of adding headers to all your $http requests:

function authInterceptor($rootScope, $q, $window) {
    return {
        request: function (config) {
            config.headers = config.headers || {};
            if ($window.sessionStorage.token) {
                config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token;
            }
            return config;
        },
        responseError: function (rejection) {
            if (rejection.status === 401) {
                console.log("not authorised");
            }
            return $q.reject(rejection);
        }
    };
};

angular
    .module('app')
    .factory('authInterceptor', authInterceptor);

The token can come from sessionStorage, cookies or anything.

zhimin · Accepted Answer · 2016-08-30 12:55:13Z

1

config $httpProvider at start up!

'use strict';

angular.module('app')
    .config(configHttp);

configHttp.$inject = ['$httpProvider'];
function configHttp($httpProvider) {
    if (!$httpProvider.defaults.headers.get) {
        $httpProvider.defaults.headers.get = {};
    }
    //disable IE ajax request caching
    $httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
    // extra
    $httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
    $httpProvider.defaults.headers.get.Pragma = 'no-cache';
    // User Credential
    $httpProvider.defaults.headers.post['user-credential'] = 'xxxxxx';
}

answered Aug 30, 2016 at 12:55

zhimin

3,05017 silver badges24 bronze badges

Comments

Yosvel Quintero · Accepted Answer · 2016-08-30 13:16:57Z

0

Following the HTTP spec clearly the right place for authorization token is in the headers.

edited Aug 30, 2016 at 13:16

answered Aug 30, 2016 at 12:57

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

2 Comments

Chris Over a year ago

Would it not be better to use an interceptor here in case @Mikail has some logic that needs to performed before he can use the token in the header of his ajax call?

Yosvel Quintero Over a year ago

The authorization token can be added to the header in multiple ways and that should be decided based on the needs and requirements. You right it may be the case that is better to use an interceptor.. I have edited my answer, thanks

Collectives™ on Stack Overflow

angular js add request parameter on every http request $http

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related