使用angularjs时,如何配置所有的$http requests的headers,增加自定义信息?

最近想要在前端所有的请求头中增加信息, 在实现过程中遇到了一些坑。下面记录了遇到的一些坑。如有疏漏,请轻喷~

1.RestangularProvider.setDefaultHeaders和$http.defaults.headers.common[‘Authorization’]的区别

RestangularProvider.setDefaultHeaders只对使用Rectangular的请求有效;
$http.defaults.headers.common对所有使用$http的请求有效;
由于Rectangular底层用的也是$http,所以$http.defaults.headers.common对Restangular的请求也生效;

2.$http.defaults.headers.common[‘Authorization’]如何使用?

1
2
3
app.run(['$http', function ($http) {
$http.defaults.headers.common['Authorization'] = 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==';
}]);

存在问题:这个头部很容易丢失;

3.使用$http拦截器

1
2
3
4
5
6
7
8
9
10
11
12
13
myapp.factory('httpRequestInterceptor', function () {
return {
request: function (config) {
config.headers['Authorization'] = 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==';
return config;
}
};
});
myapp.config(function ($httpProvider) {
$httpProvider.interceptors.push('httpRequestInterceptor');
});

4.使用angular-file-upload的坑

当使用angular-file-upload进行数据导入时,使用httpRequestInterceptor在headers中增加Token信息是无效的;
因为angular-file_upload不适用$http的服务,它使用原生的javascript XHR对象。
或许未来会支持$http服务,但是现在并不支持。现在只能在upload对象上直接添加headers信息。

1
2
var uploader = new FileUploader();
uploader.headers["Authorization"] = "Bearer " + tokenInfo.accessToken;

5.推荐angularjs库

①angular-jwt,帮助你在angularjs中使用JWT进行安全认证;
②angular-file-upload,帮助你在angularjs中上传文件;

6.参考资料:

1.RestangularProvider.setDefaultHeaders和$http.defaults.headers.common[‘Authorization’]有什么区别
2.在angularjs中为所有的请求自定义headers
3.在angular-file-upload中如何为request增加自定义的headers