Angular 2 Zaloguj się do Django Rest Framework Backend

Question

Używam Angular 2 jako mojego interfejsu front-end i Django Rest Framework na zapleczu do budowy aplikacji webapp.

Skonfigurowałem podstawową aplikację Angular 2, która pobiera dane z mojego zaplecza Framework Django Rest. Backend środowiska Django Rest ma adres URL "api-auth" skonfigurowany do logowania się za pomocą interfejsu API do przeglądania (patrz here), ale mam teraz problem z próbą zalogowania się Zaloguj się z mojej aplikacji Angular 2 .

Z tego, co mogę powiedzieć, najlepszą praktyką jest używanie tokenów internetowych JSON (JWT).

Przyjrzałem się prawie wszystkim dostępnym tutorialom/blogom online, ale nie mogę znaleźć jasnej odpowiedzi, która podsumowuje to, co muszę zrobić na zapleczu (Django) i frontencie (Angular 2). Czy ktoś jest w stanie wyjaśnić na wysokim poziomie, jak zalogować się do backendu Django Rest Framework z frontendu Angular 2?

Mam na myśli funkcję "logowania", która będzie znajdować się w pliku ".service.ts" w aplikacji Angular 2, która spowoduje wysłanie prośby o dodanie do adresu URL ".../login". Zobacz funkcję login() w this blog, aby zrozumieć, co mam na myśli. Wyszedłem z tego przykładu, ale nie daje mi to pełnego obrazu, jak utworzyć połączenie między frontendem &.

Answer 1

To rozwiązanie służy do uwierzytelniania za pomocą JWT, ale istnieją również inne rozwiązania, które nie używają JWT.

This package (django-rest-framework-jwt) pozwala na posiadanie auth punktów końcowych do zarządzania JWT w Django Rest Framework. Nie będziesz miał problemów, jeśli podążysz za docs.

Po stronie Angular2 powinieneś mieć usługę logowania, która zażądałaby JWT z serwera przy użyciu danych logowania. To zależy od Twojego modelu użytkownika w Django.

This blog post jest bardzo pomocny przy uwierzytelnianiu JWT Angular2. Możesz sprawdzić funkcję logowania w usłudze authentication.service. Zmieniłem trochę kod, aby lepiej pasował do 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 

Prosi o JWT od drf i przechowuje go w localStorage.

Od tego momentu wszystkie żądania HTTP wymagające uwierzytelniania powinny zawierać nagłówek Authorization. Istnieje http wrapper, który pozwala to zrobić.

Możesz override the default configuration settings. Minimalna konfiguracja, którą należy przesłonić, to ustawienie globalHeaders. Nie trzeba zmieniać tokenaName lub tokenGetter. Po prostu dodaj Content-Type: application/json i Accept: application/json. (DRF sprawdzi nagłówek Accept, aby zdecydować, jakiego rodzaju powinien używać Renderer.) Możesz także chcieć zmienić headerPrefix na JWT, ponieważ drf-jwt używa tego prefiksu do nagłówka autoryzacji lub możesz to zmienić z ustawień drf-jwt.