2015-01-26 4 views
3

내 nodejs, express 및 angularjs 응용 프로그램에 대해 jwt 인증을 구현하려고합니다. 지금까지 토큰을 생성하고 내 localStorage에 저장했습니다.내 인증 토큰 인터셉터가 새로운 경로의 요청/응답을 가로 채지 않습니다.

$httpProvider.interceptors.push('authInterceptor'); 

지금까지 내가 서버에 자격 증명을 보낸 다음과 같이

app.factory('authInterceptor', function ($rootScope, $q, $window) { 
    return { 
    request: function (config) { 
     config.headers = config.headers || {}; 
     if ($window.localStorage.myToken) { 
     config.headers.Authorization = 'Bearer ' + $window.localStorage.myToken; 

     } 
     return config; 
    }, 
    response: function (response) { 
     if (response.status === "401") { 
     $window.location.replace('/dash'); 
     } 
     return response || $q.when(response); 
    } 
    }; 
}); 

내가 설정 파일에 인터셉터를 추진해 왔습니다 다음과 같이 this 튜토리얼에 따르면, 나는 각 공장에 authInterceptor을 구현 한 토큰을 생성하여 localStorage에 저장했습니다.

localStorage에서 토큰을 삭제하지 않았고 토큰이 만료되지 않은 한 계속 유지해야한다고 생각합니다. angularjs의 백그라운드 ajax 호출을 사용하여로드 된 페이지 내에서 요청을하면 인증 헤더가 가정 된대로 설정됩니다.

Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VyIjoiYSIsInR5cGUiOiJzYWxlcyIsImlhdCI6MTQyMjI2MDExMCwiZXhwIjoxNDIyMjc4MTEwfQ.Iv6W-Tc8Qm4FGclzmgbtjvWFz_tyDwEvrFmMmucONpY

그러나 어느 나는 새로운 경로를 탐색 할 때 내 요청도 내 응답이 차단됩니다. 예를 들어, 나는 '/ sales'경로를 가지고 있습니다. 그러나 주소 표시 줄에서 판매 경로를 탐색 할 때 요격 인증 헤더가 요격기에 의해 설정되지 않으므로 서버에서 승인 오류 401이 반환됩니다.이 오류는도 중첩되지 않습니다. 따라서 /dash으로 리디렉션되지 않습니다. 이 request and response header at 401 error

+0

힌트 : responseError를 본 적이 있습니까? – Blackunknown

+0

'NetworkError : 401 Unauthorized - http : // localhost : 9090/sales' – Pravin

+0

사과드립니다. 나는 분명히해야했습니다. 감각적으로 : responseError : function (거부) { if (rejection.status == 401) { // 경로로 무엇인가}} – Blackunknown

답변

1

:

  • 주소 표시 줄에 URL을 입력합니다.
  • 브라우저가 요청을 보냅니다.
  • 서버가 요청을받습니다.
  • 은 필요한 html, js 및 css 파일을 제공합니다.
  • 브라우저에서 렌더링합니다.

최근 다양한 자바 스크립트 프론트 엔드 프레임 워크로의 이전과 RESTful API 사용이 시작되면서 요청에 권한 헤더가 있어야합니다.따라서 '/'라우터의 초기 요청이

  • 서버에 전송됩니다

    • , AngularJS와 같은 자바 스크립트 프레임 워크와 함께 한 페이지 웹 앱 대부분의 브라우저
    • 모든 추가 라우팅에 웹 응용 프로그램을 제공합니다 프런트 엔드 응용 프로그램 내에서 웹 응용 프로그램에서 수행되므로 URL 뒤에 "#"가 표시됩니다.
    • 요청은 각도 j를 통해 응용 프로그램에서 가져 오기, 업데이트, 삭제 또는 게시하도록 요청됩니다.

    그래서 각도 응용 프로그램에서 요청을하면 각도 응용 프로그램에서 가로 채어 인터셉터가 가로 챌 것입니다. 그러나 주소 표시 줄에서 URL을 입력하면 요청 시점에 브라우저가 각도 웹 응용 프로그램을로드하지 않았으므로 브라우저는 서버에 직접 요청을 보냅니다.

    내가 한 것은 html5mode를 false로 설정하고 경로 앞에 #을 넣었습니다.

    localhost/#/some-route과 비슷하며 경로 제공 업체의 경로를 지정하십시오. 경로 앞에 #이 있으면 /에 대한 요청이 서버로 이동하고 응용 프로그램이로드 된 다음 요청이 응용 프로그램을 통해 전송됩니다. 이제이 some-route에서 일부 컨트롤러가 원하는 서버 끝점으로 요청을 보내면 인터셉터가 가로 채게됩니다.

  • +0

    나는 이것과 매우 비슷한 문제가있는 것 같다. http://stackoverflow.com/questions/36481206/using-passport-for-authentication-of-api-endpoints – gh0st

    2

    백엔드가 401 개 상태와 함께 WWW-Authenticate 헤더를 보내고 : 여기

    오류의 링크 및 무단 노선 GET 요청의 헤더 '/ 판매'인가? 그렇다면 Basic이 포함되어 있으므로 브라우저가 응답을 수신하고 Angular가 인식하기 전에 자격 증명 팝업을 표시합니다.

    제거하거나 변경하십시오.

    참고 :

    +0

    고마워요 ... 확실히 이해가됩니다 ...하지만 그것을 구현하려고 ... u는 적어도 일부 머리를 시작 준 ... – Pravin

    +0

    난 www가 인증 헤더를 잘 못했습니다. 나는 [jsonwebtoken] (https://github.com/auth0/node-jsonwebtoken)을 사용하여 인증 헤더를 가로 채기 위해 토큰 [express-jwt] (https://github.com/auth0/express-jwt)을 생성하고있다. 서술 된 바와 같이 클라이언트 측에서 응답을 가로 채기위한 각도 인터셉터. – Pravin