AngularJS 인터셉트카를 사용한 HTTP Basic Auth 대화상자 방지

AngularJS 인터셉트카를 사용한 HTTP Basic Auth 대화상자 방지

RESTful API로 AngularJS(1.2.16) 웹앱을 구축하고 있으며, 인증정보가 유효하지 않거나 존재하지 않는 요청에 대해 401개의 Unauthorized response를 보내려고 합니다.그렇게 하면 HTTP 인터셉트가 있더라도 AngularJS를 통해 AJAX 요청이 이루어질 때 브라우저가 제시하는 기본 "Authentication Required" 대화상자가 나타납니다.내 인터셉트는 그 대화상자 이후에 실행되는데, 유용한 것을 하기에는 너무 늦습니다.

구체적인 예:

내 백엔드 API가 다음에 대해 401을 반환합니다./api/things인증 토큰이 존재하지 않는 한.단순하고 멋지군.

온 더 앵귤러JS 앱 쪽에서 문서를 보고 이런 가로채기를 설정했습니다.config블록:

$httpProvider.interceptors.push(['$q', function ($q) {
  return {
    'responseError': function (rejection) {
      if (rejection.status === 401) {
        console.log('Got a 401')
      }
      return $q.reject(rejection)
    }
  }
}])

앱을 로드할 때 인증 토큰을 제거하고 다음에 대한 AJAX 호출을 수행합니다./api/things(바라건대 위의 인터셉트를 트리거하기 위해), 나는 이것을 봅니다.

해당 대화 상자를 취소하면 다음 메시지가 표시됩니다.console.log그 대화상자 대신 내가 보기를 바랐던 "Got a 401"의 출력:

분명히, 요격기는 작동하고 있지만, 너무 늦게 요격하고 있습니다!

웹에서 Angular 인증과 관련된 수많은 게시물을 봅니다.이런 상황에서 JS는 모두 HTTP 인터셉트를 사용하는 것처럼 보이지만 기본 인증 대화상자가 뜨는 것에 대해서는 언급하지 않습니다.그것의 외관에 대해 제가 가졌던 잘못된 생각들은 다음과 같습니다.

• 실종된Content-Type: application/json응답에 대한 헤더?아니요, 거기 있어요.
• 약속 거부가 아닌 다른 것을 반환해야 합니까?이 코드는 반환되는 항목에 관계없이 항상 대화 상자 뒤에 실행됩니다.

설정 단계가 누락되었거나 인터셉트를 잘못 사용한 것입니까?

알았어요!

비결은 다음과 같이 보내는 것을 보내는 것이었습니다.WWW-Authenticate다음 값 이외의 반응 헤더Basic그런 다음 401을 기본으로 캡처할 수 있습니다.$http가로채기, 또는 각도 조절-인증과 같은 훨씬 더 영리한 것.

Spring Boot Security(HTTP basic)와 함께 이 문제를 겪었고, Angular 1.3부터 설정해야 합니다.$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';팝업이 표시되지 않도록 합니다.

나중에 참조할 수 있도록

이 문제를 해결하려고 할 때 이 해결책을 생각해 냈습니다.401오류다시 작성할 수 있는 옵션이 없었습니다.Basic로.x-Basic또는 유사한 것이 있으면 Angular로 클라이언트 쪽에서 처리하기로 했습니다.

로그아웃을 시작할 때는 먼저 가짜 사용자에게 잘못된 요청을 하여 현재 캐시된 자격 증명을 버리십시오.

요청을 수행하는 이 기능이 있습니다(jquery's를 사용하는 것입니다).$.ajax비활성화된 비동기 호출 포함):

function authenticateUser(username, hash) {
    var result = false;
    var encoded = btoa(username + ':' + hash);

    $.ajax({
        type: "POST",
        beforeSend: function (request) {
            request.setRequestHeader("Authorization", 'Basic ' + encoded);
        },
        url: "user/current",
        statusCode: {
            401: function () {
                result = false;
            },
            200: function (response) {
                result = response;
            }
        },
        async: false
    });

    return result;
}

사용자를 로그아웃하려고 하면 다음과 같은 상황이 발생합니다.

//This will send a request with a non-existant user.
//The purpose is to overwrite the cached data with something else
accountServices.authenticateUser('logout','logout');

//Since setting headers.common.Authorization = '' will still send some
//kind of auth data, I've redefined the headers.common object to get
//rid of the Authorization property
$http.defaults.headers.common = {Accept: "application/json, text/plain, */*"};

언급URL : https://stackoverflow.com/questions/24130308/preventing-http-basic-auth-dialog-using-angularjs-interceptors