Угловой JS передает идентификатор и ключ приложения с каждым запросом

Question

У меня есть базовый угловой APP, который вызывает запрос запроса GET к URL-адресу API. Возвращенные данные находятся в формате JSON. В документации по API указано следующее:

Вы должны предоставить свой идентификатор приложения и ключ с каждым запросом, который вы вносите в API. Чтобы сделать это, установите заголовок авторизации HTTP в своих запросах, состоящий из вашего идентификатора, а затем двоеточие, за которым следует ваш ключ, например abc123: xyz789.

Как включить это в мой базовый HTTP-запрос.my-код ниже.

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]); 

Это перехватит каждый запрос, сделанный из вашего приложения frontend, и включит в него этот заголовок.

Answer 2

Приводя эту тему:

How to use Basic Auth with jQuery and AJAX?

Так, в Угловом, было бы:

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