在angularjs中为此HTTP GET请求添加HTTP基本认证

Question

我有一份现有的AngularJS代码，它会进行HTTP GET请求。以下是控制器中相关的一些代码片段：

    .controller('imptViewCtrl', ['$scope', '$http', 
        function ($scope, $http, ) {
                    var url = $configuration.webroot + '/impt/list?list=testlist';
                    $http.get(url).then(function (response) {
                               tableData = response.data;
                               });
        }]);

我想要在HTTP GET请求中添加HTTP基本认证。用户名为foo，密码为bar。如何实现？

- guagay_wk

---

也许这个链接能帮到你：https://dev59.com/8GMk5IYBdhLWcg3w5Bzy？ - ssougnez

Answer 1

因为在基本认证中，用户名和密码是通过base64编码解码的。你需要先找到一个库来轻松地完成这项工作。

https://github.com/ninjatronic/angular-base64

之后，将base64加载到您的应用程序中并配置头文件。

angular
    .module('myApp', ['base64'])
    .config(function($httpProvider, $base64) {
        var auth = $base64.encode("foo:bar");
        $httpProvider.defaults.headers.common['Authorization'] = 'Basic ' + auth;
    })

如果你愿意的话，你也可以单独为get函数提供身份验证头。

var auth = $base64.encode("foo:bar"), 
    headers = {"Authorization": "Basic " + auth};
$http.get(url, {headers: headers}).then(function (response) {

- user5698801

---

你的代码看起来没问题，但我在运行它时遇到了麻烦。我已经提了另一个问题。 https://stackoverflow.com/questions/34429313/what-is-wrong-with-this-http-get-basic-authentication-code - guagay_wk

你的代码是有效的。我认为是我的服务器出了问题。标记为正确答案。 - guagay_wk

为什么需要使用库来进行 Base64 编码？为什么不直接使用 btoa() 方法 https://www.w3schools.com/jsref/met_win_btoa.asp ? - splintor

Answer 2

不必使用库来将您的身份验证通过 base 64 进行编码，您可以直接使用：

window.btoa("user:pass")

大多数浏览器都支持此方法。

https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/btoa

- ryan.wise

---

关于POST、PUT、DELETE等等呢？ - DRaehal

@DRaehal，验证请求的方式与请求的HTTP动词无关。如果目标终端需要基本身份验证，则只需应用相应标头，无论是POST、PUT等。 - superjos