javascript - Angular JS 在每次请求时都会传递 App ID 和 Key

Question

我有一个基本的 Angular APP，它对 API URL 发出 GET 请求调用。返回的数据为 JSON 格式。 API 文档说明如下:

You must provide your App ID and key with every request that you make to the API. To do this, set an HTTP Authorization header on your requests that consists of your ID, followed by a colon, followed by your key, eg abc123:xyz789.

我如何将其合并到我的基本 HTTP 请求中。我的代码如下。

angular.module('myApp', [])
.controller('MyControler', function($scope, $http) {
  $scope.$watch('search', function() {
    fetch();
  });

   $scope.search = "My Search Query";

   function fetch() {
   $http.get("https://APIURlGoesHere" + $scope.search )
    .then(function(response) {
      $scope.details = response.data;
    });

  $http.get("ttps://APIURlGoesHere" + $scope.search)
    .then(function(response) {
      $scope.related = response.data;
    });
  }

});

Answer 1

目前我知道的最好的实现方法是:拦截器

你可以找到一些有用的信息here和 here

关于 SO，这里:AngularJS $http interceptors

在您的情况下，基本上，您需要创建一个具有以下实现(或等效)的文件并将其包含到您的项目中:

function myInterceptor() {

    function request(req) {

        var token = "mytoken" ;  //<<--here you need to set the custom header's info (eg: abc123:xyz789)
        var myHeader = "myHeader";  //<<--here you need to set the custom header's name (eg: Authorization)

        if (token) {
            //put custom header for sending the token along with every request
            req.headers[myHeader] = token;
        }

        return req;
    }

    return {
        request: request
    };

};

function conf($httpProvider) {
    $httpProvider['interceptors'].push('myInterceptor');
};

angular
    .module('your_module_name')
    .factory('myInterceptor', myInterceptor)
    .config(['$httpProvider', conf]);

这将拦截从您的前端应用程序发出的每个请求，并将在其上包含该 header 。