$http Auth 헤더(각선)JS

$http Auth 헤더(각선)JS

노드 API에 도달하는 각도 어플리케이션을 가지고 있습니다.백엔드 개발자가 API에 기본 인증을 구현하여 요청 시 인증 헤더를 보내야 합니다.

추적했습니다.

$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'}})})

하지만 아무 것도 안 된다.어떻게 해결할까요?

사용 사례와 인스턴스화된 서비스를 혼재시키고 있습니다.$http프로바이더는 실행 블록에서는 동작하지 않지만 설정 단계에서는 를 사용할 수 없습니다.모듈 문서:

• 구성 블록 - [...] 공급자 및 상수만 구성 블록에 삽입할 수 있습니다.이는 서비스가 완전히 설정되기 전에 실수로 인스턴스화되는 것을 방지하기 위한 것입니다.
• 실행 블록 - [...] 실행 블록에는 인스턴스와 상수만 주입할 수 있습니다.이는 애플리케이션 실행 시 추가 시스템 구성을 방지하기 위한 것입니다.

따라서 다음 중 하나를 사용합니다.

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

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

다음과 같은 각도 요청 대행 수신기를 갖춘 서비스 팩토리가 있습니다.

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

이렇게 하면 로그인 후 모든 요청에 헤더를 할당할 수 있습니다.이것은 제가 하는 방식이고, 완전히 비판의 대상이 되고 있지만, 매우 효과가 있는 것 같습니다.

컨트롤러에서 사용할 수 있습니다.

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

angularjs 매뉴얼에서는 헤더를 설정하는 방법을 몇 가지 볼 수 있지만, 다음과 같이 검색할 수 있습니다.

$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를 사용하는 angularjs 클라이언트에서 이 구조를 사용하고 있습니다.NET 5 서버라면 동작합니다.

$http 문서에서 $httpProvider를 사용하여 기본 헤더를 설정해야 합니다.

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

작업 예: 이것은 @MrZime - Thanks!에서 학습한 것으로, https://docs.angularjs.org/api/ng/service/$http#setting-http-headers 를 참조해 주세요.

2018년 3월 2일 현재 NGULARJS의 최신 버전 1.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의 debug/F12 콘솔 패널을 보면 "OK" 상태를 얻을 수 있으며 "returned Data"는 최종적으로 원하는 것입니다.데이터를 즐겨보세요!

다음과 같이 "Basic"에 추가하기 전에 사용자: 비밀번호를 base64로 인코딩해당 사용자: 비밀번호를 다음과 같이 입력합니다.

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

아래 줄을 추가합니다.aap.run방법

$http.defaults.headers.common.Authorization = 'Basic YmVlcDpib29w';

언급URL : https://stackoverflow.com/questions/18877715/http-auth-headers-in-angularjs