Question

我有一个角度应用程序正在命中节点API。我们的后端开发人员已经在API上实现了基本身份验证，我需要在请求中发送auth标头。

我追查到了：

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

我试过了：

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

除了将其直接附加到请求之外：

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

但没有任何作用。怎么解决这个问题？

Answer 1

您正在混合使用案例;实例化服务（$http）不能在配置阶段使用，而提供商不能在运行块中工作。来自module docs：

配置块 - [...]只能注入提供程序和常量   到配置块。这是为了防止意外实例化   服务完全配置之前的服务。

运行块 - [...]只能将实例和常量注入到运行中   块。这是为了防止进一步的系统配置   申请运行时间。

请使用以下任一项：

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

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

Answer 2

您可以在控制器中使用它：

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

Answer 3

我有一个服务工厂，它有一个角度请求拦截器，如：

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

然后在登录我的登录控制器时，我使用以下行存储了accessstoken：

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

通过这种方式，我可以在登录后的每个请求上为请求分配标题。这就是我这样做的方式，完全是批评，但它看起来效果很好。

Answer 4

在angularjs documentation中，您可以看到一些设置标题的方法，但我认为这就是您要搜索的内容：

$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")
    }
});

我在使用ASP.NET 5服务器的angularjs客户端中使用此结构，它可以正常工作。

Answer 5

在$http doc中，您可以看到应使用$ httpProvider设置默认标头：

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

Answer 6

工作示例：我从@MrZime学到了这一点 - 谢谢！并阅读https://docs.angularjs.org/api/ng/service/ $ http＃setting-http-headers

截至2018年3月2日NGULARJS的最新v1.6.x

        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")

            }
        });

将它添加到your.js文件中并将此your.js包含在your.html文件中，并在chrome / F12上查看控制台面板上的chrome，你应该获得OK状态和＆＃34; returnedData＆＃34;是你最终想要的。享受数据！

Answer 7

尝试使用base64编码用户：密码，然后再将其附加到＆＃34;基本＆＃34;，如下所示：

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

Answer 8

在您的getJson = function(json, jsonTrajectory){ stopifnot(length(jsonTrajectory)==1) .getJson1 = function(json, jsonTrajectory){ if(is.na(json)|json=="") return(NA) return(jqr::jq(json, jsonTrajectory)) } jsonParsedVector = json %>% purrr::map(.f = ~.getJson1(.x, jsonTrajectory)) return(jsonParsedVector) }方法的行下方添加

aap.run

AngularJS中的$ http Auth Headers

8 个答案: