How to update headers in $resource when routing to a new state - angularjs

Question

I'm trying to implement JWT token in this project. For that I used Authorization header in the $resource, like as this.
When I login on UI state "A", after getting logged in, I put the token in the localStorage as
$localStorage.token = data.token;
When I go to UI state "B" of the page, it uses the following service and send a request with no token. But on refreshing the page, it sends the same request with the token.
angular.module('BlurAdmin')
.factory('valueService', ['Token','$localStorage','$resource', 'endpoint', function(Token,$localStorage, $resource, endpoint) {
return {
getValues: $resource(endpoint + '/admin/getvalues', null, {
'get': {
method: 'GET',
headers:{'Authorization':'Bearer '+$localStorage.token}
}
}),
}
}]);
I think the service stores the $localStorage.token value initially and uses that even when the state changes. But when the page is reloaded, it gets the $localStorage.token value again.
How do I force this service to get the $localStorage.token value everytime the UI state changes?
Thanks in Advance!

Answer 1

To have the resource compute the header value on each XHR GET operation, furnish a function instead of a value:
angular.module('BlurAdmin')
.factory('valueService', ['Token','$localStorage','$resource', 'endpoint', function(Token,$localStorage, $resource, endpoint) {
return {
getValues: $resource(endpoint + '/admin/getvalues', null, {
'get': {
method: 'GET',
//headers:{'Authorization':'Bearer '+$localStorage.token}
headers:
{'Authorization':
function () {
return 'Bearer '+$localStorage.token;
}
}
}
}),
}
}]);
When a value is furnished, the header value is computed when the resource is created. When a function is furnished, the header value is computed each time the resource get method is called.
headers – {Object} – Map of strings or functions which return strings representing HTTP headers to send to the server. If the return value of a function is null, the header will not be sent. Functions accept a config object as an argument.
-- AngularJS $http Service API Reference - Usage

Answer 2

Your problem is that the resource definition is provided at the time of creation (before you have saved a token). To avoid this behavior, simply create a wrapper function and parse your token into it.
angular.module('BlurAdmin')
.factory('valueService', ['Token','$localStorage','$resource', 'endpoint', function(Token,$localStorage, $resource, endpoint) {
return function (token) {
return $resource(endpoint + '/admin/getvalues', {}, {
get: {
method: 'GET',
headers:{'Authorization':'Bearer ' + token}
}
})
}
}]);
Call your factory function like:
valueService($localStorage.token).get(function (result) {
console.log(result);
}, function (error) {
console.log(result);
});

Answer 3

If you are using the header with many API calls, It is better to add it in a commom place rather than adding it with each API
Please refer : intercepter https://docs.angularjs.org/api/ng/service/$http
angular.module('utimf.services', ['ngResource', 'ng.deviceDetector'])
.factory('UtimfHttpIntercepter', UtimfHttpIntercepter)
UtimfHttpIntercepter.$inject = ['$q', '$localStorage'];
function UtimfHttpIntercepter($q, $localStorage) {
var authFactory = {};
var _request = function (config) {
config.headers = config.headers || {}; // change/add hearders
config.data = config.data || {}; // change/add post data
config.params = config.params || {}; //change/add querystring params
config.headers['Authorization'] = 'Bearer '+$localStorage.token; // New headers are added here
return config || $q.when(config);
}
var _requestError = function (rejection) {
// handle if there is a request error
return $q.reject(rejection);
}
var _response = function(response){
// handle your response
return response || $q.when(response);
}
var _responseError = function (rejection) {
// handle if there is a request error
return $q.reject(rejection);
}
authFactory.request = _request;
authFactory.requestError = _requestError;
authFactory.response = _response;
authFactory.responseError = _responseError;
return authFactory;
}
and add $httpProvider.interceptors.push('UtimfHttpIntercepter'); in your config