将标题添加到由Yeoman创建的AngularJS应用程序中的所有请求
我刚刚使用Yeoman
构建了我的第一个AngularJS
应用程序。我已经做到了,像这样:将标题添加到由Yeoman创建的AngularJS应用程序中的所有请求
$ yo angular frontend
其结果是,我有一大堆标准的文件夹和文件等:
- app
- images
- scripts
app.js
- styles
- views
index.html
...
- bower_components
- node_modules
- test
好像我不得不改变app.js文件以便为所有请求添加标题。但是我对AngularJs非常陌生,我不知道我该怎么做。现在,app.js的样子:
angular
.module('frontend', [
...
])
.config(function($routeProvider){
$routeProvider
.when(...)
});
我想,我需要设置$httpProvider
,但我怎么能做到这一点?
您应该为此使用interceptor
。下面是从AngularJS文档的推荐方式:
// register the interceptor as a service
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
return {
// optional method
'request': function(config) {
// do something on success
return config;
},
// optional method
'requestError': function(rejection) {
// do something on error
if (canRecover(rejection)) {
return responseOrNewPromise
}
return $q.reject(rejection);
},
// optional method
'response': function(response) {
// do something on success
return response;
},
// optional method
'responseError': function(rejection) {
// do something on error
if (canRecover(rejection)) {
return responseOrNewPromise
}
return $q.reject(rejection);
}
};
});
$httpProvider.interceptors.push('myHttpInterceptor');
所有你需要做的是落实'request'
方法,因为所有的方法都是可选的。提供的配置对象是一个角度为$http
的配置对象,它包含一个headers
属性。你应该能够很轻松地添加你的头到这一点:
config.headers.myHeader = myValue;
return config;
你可以抓住在你的配置博客的$httpProvider
简单地将其添加到参数列表:
angular
.module('frontend', [
...
])
.config(function($routeProvider, $httpProvider, $provide){
$routeProvider
.when(...)
// register the interceptor as a service
$provide.factory('myHttpInterceptor', function() {
return {
// optional method
'request': function(config) {
config.headers.myHeader = myValue;
return config;
},
};
});
$httpProvider.interceptors.push('myHttpInterceptor');
});
我应该把这个代码在'应用程序。 js' fil è?如果我使用了这样一个'拦截器',那么为所有请求设置一些任意头部的正确方法是什么?我想,我应该编辑'request'方法? – Jacobian
也可以在不需要拦截器的情况下设置默认值 – charlietfl
@charlietfl。你会如此友善,给一个代码片段,我应该添加到我的app.js文件来设置一个头,使用默认值?谢谢! – Jacobian
更好的解决方案,以增加在所有的请求头是readung的[$ httpProvider文档]
app.run(['$http', function ($http) {
$http.defaults.headers.common['myHeader'] = 'myHeaderValue';
}]);
启动(https://docs.angularjs.org/api/ng/provider/$httpProvider) – charlietfl