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

Stack Overflow用户

提问于 2017-02-07 01:52:24

回答 3查看 106关注 0票数 0

我试图在这个项目中实现JWT令牌。为此，我在$resource中使用了授权头，如下所示。

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

$localStorage.token = data.token;

当我进入页面的UI状态"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值。

如何在UI状态每次更改时强制此服务获取$localStorage.token值？

提前谢谢！

angularjs

angular-ui-router

jwt

angular-services

angular-local-storage

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-02-07 10:00:56

要让资源计算每个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} -或函数的映射，返回字符串表示要发送到服务器的headers。如果函数的返回值为null，则不会发送标头。函数接受配置对象作为参数。 - AngularJS $http服务API参考-使用

票数 1

Stack Overflow用户

发布于 2017-02-07 01:57:26

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

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

票数 1

Stack Overflow用户

发布于 2017-02-07 02:11:19

如果您在使用包含多个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;
}