Question

我正在尝试在这个项目中实现JWT令牌。为此我在var queue Queue中使用了Authorization标头，就像这样。

当我登录UI状态“A”时，在登录后，我将令牌放在localStorage中

$resource

当我转到页面的UI状态“B”时，它使用以下服务并发送没有令牌的请求。但是在刷新页面时，它会使用令牌发送相同的请求。

$localStorage.token = data.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} } }), } }]);值，即使状态发生变化也会使用该值。但是当重新加载页面时，它会再次获得$localStorage.token值。

每次UI状态发生变化时，如何强制此服务获取$localStorage.token值？

提前致谢！

Answer 1

您的问题是资源定义是在创建时（保存令牌之前）提供的。要避免这种行为，只需创建一个包装函数并将令牌解析为它。

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 2

要让资源计算每个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方法时都会计算标头值。

headers - {Object} - 字符串的映射或返回字符串的函数，表示要发送到服务器的HTTP标头。如果函数的返回值为null，则不会发送标头。函数接受配置对象作为参数。

-- AngularJS $http Service API Reference - Usage

Answer 3

如果您使用带有许多API调用的标头，最好将它添加到通用位置而不是将其添加到每个API

请参阅：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;
}

并在您的配置中添加$httpProvider.interceptors.push('UtimfHttpIntercepter');

如何在路由到新状态时更新$ resource中的标头

3 个答案: