Cabeçalhos de Autenticação $ http no AngularJS

Eu tenho um aplicativo angular que está atingindo uma API de nó. Nosso desenvolvedor de back-end implementou a autenticação básica na API e eu preciso enviar um header de autorização na minha solicitação.

Eu localizei:

$http.defaults.headers.common['Authorization'] = 'Basic ' + login + ':' + password); 

Eu tentei:

 .config(['$http', function($http) { $http.defaults.headers.common['Authorization'] = 'Basic ' + login + ':' + password); }]) 

Além de anexá-lo diretamente ao pedido:

 $http({method: 'GET', url: url, headers: {'Authorization': 'Basic auth'}})}) 

Mas nada funciona. Como resolver isso?

Você está misturando os casos de uso; serviços instanciados ( $http ) não podem ser usados ​​na fase de configuração, enquanto os provedores não funcionarão em blocos de execução. Nos documentos do módulo :

  • Blocos de configuração – […] Somente provedores e constantes podem ser injetados nos blocos de configuração. Isso é para impedir a instanciação acidental de serviços antes que eles tenham sido totalmente configurados.
  • Blocos de execução – […] Somente instâncias e constantes podem ser injetadas em blocos de execução. Isso evita a configuração adicional do sistema durante o tempo de execução do aplicativo.

Portanto, use um dos seguintes:

 app.run(['$http', function($http) { $http.defaults.headers.common['Authorization'] = /* ... */; }]); 
 app.config(['$httpProvider', function($httpProvider) { $httpProvider.defaults.headers.common['Authorization'] = /* ... */; }]) 

Eu tenho uma fábrica de serviços que tem um interceptador de solicitação angular assim:

 var module = angular.module('MyAuthServices', ['ngResource']); module .factory('MyAuth', function () { return { accessTokenId: null }; }) .config(function ($httpProvider) { $httpProvider.interceptors.push('MyAuthRequestInterceptor'); }) .factory('MyAuthRequestInterceptor', [ '$q', '$location', 'MyAuth', function ($q, $location, MyAuth) { return { 'request': function (config) { if (sessionStorage.getItem('accessToken')) { console.log("token["+window.localStorage.getItem('accessToken')+"], config.headers: ", config.headers); config.headers.authorization = sessionStorage.getItem('accessToken'); } return config || $q.when(config); } , responseError: function(rejection) { console.log("Found responseError: ", rejection); if (rejection.status == 401) { console.log("Access denied (error 401), please login again"); //$location.nextAfterLogin = $location.path(); $location.path('/init/login'); } return $q.reject(rejection); } } }]); 

Então, ao efetuar login no meu controlador de login, eu armazeno o accesstoken usando esta linha:

 sessionStorage.setItem('currentUserId', $scope.loginResult.user.id); sessionStorage.setItem('accessToken', $scope.loginResult.id); sessionStorage.setItem('user', JSON.stringify($scope.loginResult.user)); sessionStorage.setItem('userRoles', JSON.stringify($scope.loginResult.roles)); 

Dessa forma, posso atribuir os headers à solicitação em todas as solicitações feitas depois de eu fazer o login. É exatamente assim que faço, e estou totalmente pronto para críticas, mas parece funcionar muito bem.

Você pode usá-lo no controlador:

 .controller('Controller Name', ['$http', function($http) { $http.defaults.headers.common['Authorization'] = 'Basic ' + login + ':' + password; }]); 

Na documentação do angularjs, você pode ver algumas maneiras de definir headers, mas acho que é isso que você está pesquisando:

 $http({ method: 'POST', url: '/theUrl', headers: { 'Authorization': 'Bearer ' + 'token' //or //'Authorization': 'Basic ' + 'token' }, data: someData }).then(function successCallback(response) { $log.log("OK") }, function errorCallback(response) { if(response.status = 401){ // If you have set 401 $log.log("ohohoh") } }); 

Eu estou usando essa estrutura no meu cliente angularjs com um servidor ASP.NET 5 e funciona.

No documento $ http, você pode ver que deve definir os headers padrão usando $ httpProvider:

 .config(['$httpProvider', function($httpProvider) { $httpProvider.defaults.headers.common['Authorization'] = 'Basic auth'; }]); 

Tente codificar base64 seu usuário: senha antes de anexá-lo ao “Basic”, como em:

 headers: { 'Authorization': "Basic " + auth64EncodedUserColonPass } 

EXEMPLO DE TRABALHO: Eu aprendi isso com @MrZime – Obrigado! e leia https://docs.angularjs.org/api/ng/service/ $ http # setting-http-headers

Mais recentes v1.6.x de NGULARJS a partir de 2018 02 de março

  var req = { method: 'POST', url: 'https://api.losant.com/applications/43fdsf5dfa5fcfe832ree/data/last-value-query', headers: { 'Authorization': 'Bearer ' + 'adsadsdsdYXBpVG9rZW4iLCJzrdfiaWF0IjoxNdfsereOiJZ2V0c3RfdLmlvInfdfeweweFQI-dfdffwewdf34ee0', 'Accept': 'application/json', 'Content-Type': 'application/json' }, data: { "deviceIds": [ "a6fdgdfd5dfqaadsdd5", "azcxd7d0ghghghghd832" ], "attribute": "humidity" } } $http(req).then(function successCallback(response) { $log.log("OK!") returnedData = response.data }, function errorCallback(response) { if (response.status = 401) { // If you have set 401 $log.log("BAD 401") } else { $log.log("broken at last") } }); 

Adicione-o ao seu arquivo.js e inclua este arquivo your.js no arquivo your.html e examine o painel do console em debug / F12 no chrome você deve obter o status OK e “returnedData” é o que você deseja no final. Aproveite os dados!