Angular JS 在每个请求中传递 App ID 和 Key

Question

我有一个基本的 Angular 应用程序，它可以对 API URL 进行 GET 请求调用。返回的数据为 JSON 格式。 API 文档声明如下：

您必须在向 API 发出的每个请求中提供您的 App ID 和密钥。为此，请在您的请求中设置一个 HTTP 授权标头，该标头由您的 ID、后跟一个冒号和您的密钥组成，例如 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找到一些有用的信息

然后，在这里：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]);

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

Answer 2

引用这个话题：

How to use Basic Auth with jQuery and AJAX?

因此，在 Angular 中，它将是：

$http({
      method: "GET",
      url: "https://APIURlGoesHere" + $scope.search,
     headers: { 'Authorization' : 'Basic '+btoa(username + ":" + password) 
     })
.then(function(response) {
  $scope.details = response.data;
});