AngularJs HTTP 응답 차단기 로그 인,권한 검사

$httpAngularJS 의$http 서 비 스 는 HTTP 요청 을 보 내 는 방식 으로 배경 과 통신 할 수 있 습 니 다.어떤 경우 에는 모든 요청 을 사로 잡 고 서버 에 보 내기 전에 조작 할 수 있 기 를 바 랍 니 다.응답 을 사로 잡 고 호출 이 완료 되 기 전에 처리 하 기 를 바 라 는 경우 도 있다.좋 은 예 는 전역 http 이상 을 처리 하 는 것 입 니 다.차단기(Interceptors)가 생 겨 났 다.본 고 는 AngularJS 의 차단 기 를 소개 하고 몇 가지 유용 한 예 를 제시 할 것 이다.
차단기 가 뭐 예요?
$http Provider 에는 interceptors 배열 이 있 습 니 다.차단기 라 는 것 은 이 배열 의 일반적인 서비스 공장 에 간단하게 등 록 된 것 입 니 다.다음 예 는 차단 기 를 만 드 는 방법 을 알려 줍 니 다.

<!-- lang: js -->
module.factory('myInterceptor', ['$log', function($log) {
  $log.debug('$log is here to show you that this is a regular factory with injection');

  var myInterceptor = {
    ....
    ....
    ....
  };

  return myInterceptor;
}]);

그리고 그 이름 을 통 해$http Provider.interceptors 배열 에 추가 합 니 다:

<!-- lang: js -->
module.config(['$httpProvider', function($httpProvider) {
  $httpProvider.interceptors.push('myInterceptor');
}]);

차단기 허용:

request 방법 으로 요청 을 차단 합 니 다.이 방법 은$http 에서 요청 채널 백 엔 드 를 보 내기 전에 실 행 됩 니 다.따라서 설정 을 수정 하거나 다른 작업 을 할 수 있 습 니 다.이 방법 은 요청 설정 대상(request configuration object)을 매개 변수 로 받 은 다음 설정 대상 이나 promise 를 되 돌려 야 합 니 다.잘못된 설정 대상 이나 promise 를 되 돌려 주면 거부 되 어$http 호출 에 실 패 했 습 니 다.

response 방법 으로 응답 을 차단 합 니 다.이 방법 은$http 에서 배경 에서 온 응답 을 받 은 후에 실 행 됩 니 다.따라서 응답 을 수정 하거나 다른 작업 을 할 수 있 습 니 다.이 방법 은 응답 대상(response object)을 매개 변수 로 받 은 다음 응답 대상 이나 promise 를 되 돌려 야 합 니 다.응답 대상 은 요청 설정(request configuration),헤드(headers),상태(status)와 배경 에서 온 데이터(data)를 포함한다.잘못된 응답 대상 이나 promise 를 되 돌려 주 는 것 이 거부 되 어$http 호출 이 실 패 했 습 니 다.

requestError 를 실현 하 는 방법 으로 요청 이상 을 차단 합 니 다.어떤 때 는 요청 이 전송 에 실패 하거나 차단기 에 의 해 거부 되 기도 합 니 다.요청 이상 차단 기 는 이전 요청 차단기 에 의 해 중 단 된 요청 을 사로 잡 을 수 있 습 니 다.요청 을 복구 하거나 요청 하기 전에 설정 을 취소 하 는 데 사용 할 수 있 습 니 다.예 를 들 어 진행 바 를 닫 거나 버튼 을 활성화 하거나 입력 상자 등 입 니 다.

responseError 를 실현 하 는 방법 으로 응답 이상 을 차단 합 니 다.가끔 은 배경 호출 이 실 패 했 습 니 다.요청 차단기 에 의 해 거부 되 거나 이전 응답 차단기 에 의 해 중단 되 었 을 수도 있 습 니 다.이런 상황 에서 응답 이상 차단 기 는 배경 호출 을 복구 하 는 데 도움 을 줄 수 있다.

angularJs 는 네 가지 차단 기 를 제공 합 니 다.그 중에서 두 가지 성공 차단기(request,response),두 가지 실패 차단기(requestError,responseError)를 제공 합 니 다.

angular.module("myApp", [])
  .factory('httpInterceptor', [ '$q', '$injector',function($q, $injector) {
    var httpInterceptor = {
      'responseError' : function(response) {
        ......
        return $q.reject(response);
      },
      'response' : function(response) {
        ......
        return response;
      },
      'request' : function(config) {
        ......
        return config;
      },
      'requestError' : function(config){
        ......
        return $q.reject(config);
      }
    }
    return httpInterceptor;
  }

따라서 로그 인과 권한 문 제 를 차단 기 를 통 해 판단 할 수 있 습 니 다.
코드 에 있 는$rootScope.user 는 로그 인 후 사용자 정 보 를 전역 rootScope 에 올 려 다른 곳 에서 사용 하기에 편리 합 니 다.$rootScope.default Page 도 기본 홈 페이지 입 니 다.초기 화 할 때 rootScope 에 쓰 여 죽 었 습 니 다.

$rootScope.$on('$stateChangeStart',function(event, toState, toParams, fromState, fromParams){
 if(toState.name=='login')return;//             
 //        
 if(!$rootScope.user || !$rootScope.user.token){
 event.preventDefault();//         
 $state.go("login",{from:fromState.name,w:'notLogin'});//       
 }
});

또한 사용자 가 이미 로그 인 했 지만 로그 인 시간 이 초과 되 었 고 배경 인터페이스의 판단 을 증가 시 켜 안전성 을 강화 했다.로 컬 논리 에 완전히 의존 할 수 는 없다.
저 희 는 model 에 사용자 차단 기 를 추가 하여 rensponseError 에서 오류 코드 를 판단 하고 이 벤트 를 던 져 서 Contoller 나 view 로 처리 합 니 다.

app.factory('UserInterceptor', ["$q","$rootScope",function ($q,$rootScope) {
 return {
    request:function(config){
      config.headers["TOKEN"] = $rootScope.user.token;
      return config;
    },
    responseError: function (response) {
      var data = response.data;
  //      ，      
      if(data["errorCode"] == "500999"){
  //       token     ，  
        $rootScope.user = {token:""};
  //     ，    view     ，           
        $rootScope.$emit("userIntercepted","notLogin",response);
      }
  //        
  if(data["errorCode"] == "500998"){
        $rootScope.$emit("userIntercepted","sessionOut",response);
      }
      return $q.reject(response);
    }
  };
}]);

angularjs config 에 차단 기 를 등록 하 는 것 을 잊 지 마 세 요.

app.config(function ($httpProvider) {
  $httpProvider.interceptors.push('UserInterceptor');
});

마지막 으로 controller 에서 오류 사건 을 처리 합 니 다.

$rootScope.$on('userIntercepted',function(errorType){
  //        ，        from，                       
  $state.go("login",{from:$state.current.name,w:errorType});
});

마지막 으로 loginController 에서 더 많은 디 테 일 처 리 를 할 수 있 습 니 다.

//          ，              ，     
if($rootScope.user.token){
  $state.go($rootScope.defaultPage);
  return;
}

또한 로그 인 에 성공 한 후 이전 화면 으로 이동 할 수 있 습 니 다.즉,위 에 기 록 된 from 입 니 다.

var from = $stateParams["from"];
$state.go(from && from != "login" ? from : $rootScope.defaultPage);

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.