각도 2 Django Rest 프레임 워크 백엔드에 로그인

Question

웹 응용 프로그램을 빌드하기 위해 프런트 엔드로 각도 2를 사용하고 백엔드에서 Django Rest Framework를 사용하고 있습니다.

Django Rest Framework 백엔드에서 데이터를 가져 오는 기본 앵귤러 2 앱을 설정했습니다. Django Rest Framework 백엔드에는 탐색 가능한 API로 로그인하도록 구성된 'api-auth'url이 있습니다. (내 말은 here을 참조하십시오.) 이제 문제가 발생했습니다. 내 Angular 2 앱에서 로그인하십시오. .

JSON 웹 토큰 (JWT)을 사용하는 것이 가장 좋습니다.

나는 거의 모든 입수 가능한 자습서/블로그 게시물을 온라인에서 살펴 봤지만 내가 백엔드 (Django)와 프론트 ント (각도 2)에서해야 할 일을 요약 한 명확한 답을 찾을 수 없다. 누군가가 높은 각도에서 Django Rest Framework 백엔드에 로그인하는 방법을 Angular 2 프론트 엔드에서 설명 할 수 있습니까?

저는 "로그인"기능에 대해 Angular 2 앱의 ".service.ts"파일에 앉아 URL ".../login"에 대한 게시물 요청을하게하려고 구체적으로 생각하고 있습니다. 무슨 뜻인지 이해하려면 login() 함수를 this blog에서보십시오. 그 예제를 벗어나려고했지만 프론트 엔드 & 백엔드 사이의 연결을 만드는 방법에 대한 전체 그림을 제공하지 않습니다.

Answer 1

이 솔루션은 JWT를 사용하는 인증 용이지만 JWT를 사용하지 않는 다른 솔루션도 있습니다.

This package (django-rest-framework-jwt)을 사용하면 Django Rest Framework에서 JWT를 관리하기위한 인증 엔드 포인트를 가질 수 있습니다. docs을 따르는 경우 아무런 문제가 없습니다.

Angular2 쪽에서는 로그인 자격 증명을 사용하여 서버에서 JWT를 요청하는 로그인 서비스가 있어야합니다. 그것은 장고 사용자 모델에 따라 다릅니다.

This blog post은 Angular2 JWT 인증에 매우 유용합니다. authentication.service에서 로그인 기능을 확인할 수 있습니다. 나는 DRF-jwt에 더 잘 맞게 코드를 약간 변경했다.

let headers = new Headers({ 
    'Accept': 'application/json', 
    'Content-Type': 'application/json', 
}); 
let options = new RequestOptions({ 
    headers: headers 
}); 
this.http.post(basePath + '/api-token-auth/', JSON.stringify({ username: username, password: password }), options) 
.map((response: Response) => { 
     // login successful if there's a jwt token in the response 
     let token = response.json() && response.json().token; 

     if (token) { 
     // set token property 
     this.token = token; 

     // store username and jwt token in local storage to keep user logged in between page refreshes 
     localStorage.setItem('id_token', token); 

     // return true to indicate successful login 
     return true; 
     } else { 
     // return false to indicate failed login 
     return false; 
     } 
    }); 
// 'api-token-auth/' is the default endpoint with drf-jwt 

drf에서 jwt를 요청하고이를 localStorage에 저장합니다.

여기에서 인증이 필요한 모든 http 요청에는 Authorization 헤더가 포함되어야합니다. 이 작업을 수행 할 수있는 http wrapper이 있습니다.

override the default configuration settings 수 있습니다. 재정의해야하는 최소 구성은 globalHeaders를 설정해야한다는 것입니다. tokenName 또는 tokenGetter는 변경할 필요가 없습니다. Content-Type: application/json 및 Accept: application/json을 추가하십시오. DRF는 Accept 헤더를 검사하여 어떤 종류의 Renderer을 사용해야할지 결정합니다. drf-jwt가 권한 헤더에 해당 접두어를 사용하거나 drf-jwt의 설정에서 변경할 수 있기 때문에 headerPrefix를 JWT으로 변경할 수도 있습니다.