Как обновить заголовки в $resource при маршрутизации в новое состояние

Question

Я пытаюсь реализовать токен JWT в этом проекте. Для этого я использовал заголовок авторизации в $resource Примерно так.

Когда я вхожу в пользовательский интерфейс в состоянии "A", после входа в систему я помещаю токен в localStorage как

$localStorage.token = data.token;

Когда я перехожу в состояние пользовательского интерфейса "B" на странице, он использует следующий сервис и отправляет запрос без токена. Но при обновлении страницы он отправляет тот же запрос с токеном.

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}
                 }
            }),
        }   
}]);

Я думаю, что сервис хранит $localStorage.token значение изначально и использует его, даже когда состояние меняется. Но когда страница перезагружается, она получает $localStorage.token значение снова.

Как заставить этот сервис получить $localStorage.token значение каждый раз, когда изменяется состояние пользовательского интерфейса?

Заранее спасибо!

Answer 1

Чтобы ресурс вычислял значение заголовка для каждой операции XHR GET, предоставьте функцию вместо значения:

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;
                            }
                       }
                 }
            }),
        }   
}]);

Когда значение предоставлено, значение заголовка вычисляется при создании ресурса. Когда функция предоставлена, значение заголовка вычисляется каждый раз, когда ресурс get метод называется.

• заголовки - {Object} - Карта строк или функций, которые возвращают строки, представляющие заголовки HTTP, для отправки на сервер. Если возвращаемое значение функции равно нулю, заголовок не будет отправлен. Функции принимают объект конфигурации в качестве аргумента.

  - Справочник по API AngularJS $ http - Использование

Answer 2

Ваша проблема в том, что определение ресурса предоставляется во время создания (до того, как вы сохранили токен). Чтобы избежать такого поведения, просто создайте функцию-обертку и проанализируйте в ней свой токен.

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}
                }
            })
        }
    }]);

Назовите свою фабричную функцию как:

valueService($localStorage.token).get(function (result) {
    console.log(result);
}, function (error) {
    console.log(result);
});

Answer 3

Если вы используете заголовок со многими вызовами API, лучше добавить его в обычном месте, чем добавлять его с каждым API

Пожалуйста, обратитесь: перехватчик 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;
}

и добавить $httpProvider.interceptors.push('UtimfHttpIntercepter'); в вашем конфиге