Question

我在Angular中使用ng-resource来访问RESTful API。我创建了一个简单的工厂来执行此操作。

.factory('Bookmark', function($resource){
    return $resource('http://bookmarks-angular.herokuapp.com/api/bookmarks/:id');
})

在控制器中，我使用了Bookmark.query：

.controller('MainController', function($scope, Category, Bookmark){
    $scope.name = 'Carl';
    Category.getAll(function(data){
        $scope.categories = data.categories;
        $scope.currentCategory = data.categories[0];
        $scope.bookmarks = Bookmark.query();
    });
})

我需要使用Bookmark.save和Bookmark.remove以及Authorization标头中的标记。搜索这是我必须使用的方法：

$resource('url/to/json', {}, {
    get: {
        method: 'GET',
        headers: { 'something': 'anything' }
    }
});

但它只适用于get方法，我想在每个$resource方法中使用发送标记。我不想overwrite只发送此标头的所有方法。还有其他解决方案吗？

Answer 1

你可以从angular docs：

创建一个类似这样的httpInterceptor

$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
    return {
      'request': function(config) {
          // add headers
          return config;
    }
}

https://docs.angularjs.org/api/ng/service/ $ HTTP

Answer 2

这可能会帮助您创建拦截器。 http://ramanshankar.blogspot.in/2015/11/angularjs-http-interceptor.html

var app = angular.module('simpleDirective', []);

app.config(['$httpProvider', function($httpProvider){
 $httpProvider.interceptors.push('httpInterceptor');
}]);

app.controller("DemoController", ['$rootScope','demoService', function($rootScope, demoService){
 $rootScope.message = [];
 $rootScope.message.push("In Demo Controller");
 demoService.functionOne();
}]);

app.service("demoService", ['$http','$rootScope',function($http, $rootScope){
 this.functionOne = function(){
  $http.get("temp.html")
  .success(function(data){
   $rootScope.message.push(data);
  })
  .error(function(data){
   $rootScope.message.push("Demo Service Error: "+data);
  });
 }
}]);

app.factory("httpInterceptor", function(){
  return{
    'request': function(config) {
      alert("request");
      return config;
    },

   'requestError': function(rejection) {
      alert("request error");
      return "Request error";
    },

    'response': function(response) {
      alert("response");
      return response;
    },

   'responseError': function(rejection) {
      alert("response error");
      return "response error";
    }
  }
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="simpleDirective">
<div ng-controller="DemoController">  
<h2>AngularJS Interceptor Example</h2>  
<div ng-repeat="msg in message">  
 <div style="padding:5px;background:lightgrey;border:1px solid black;margin-bottom:10px;">{{msg}}</div>  
</div>  
</div>  
  </div>

将标头设置为所有$ resource方法

2 个答案: