Django Sitzungsauthentifizierung mit kantigem 2

Question

Ich habe mir alle um für sitzungsbasierten Authentifizierung mit kantigem 2.

Ich bin eine Anwendung erstellen, die Django auf Backend und Angular 2 auf dem Frontend hat. Um den Prozess einfach zu halten, versuche ich die Django Session Authentifikation zu implementieren.

// Angular 2 authentication service 
import { Injectable } from "@angular/core"; 
import { Headers, Http, Response } from "@angular/http"; 

import "rxjs/add/operator/toPromise"; 
import 'rxjs/add/operator/map' 

import { AppSettings } from "../../app.settings"; 

@Injectable() 
export class UserAuthService { 
    private headers = new Headers({'Content-Type': 'application/json'}); 

    private loginUrl = `${AppSettings.BACKEND_URL}` + '/api/v1/users/login/'; 

    constructor(
     private http: Http 
    ) { } 

    login(username, password) { 
     let data = { 
      username: username, 
      password: password 
     }; 
     return this.http.post(this.loginUrl, data, this.headers) 
      .map((response: Response) => response.json()); 
    } 
} 

# Django Login view 
def login(self, request): 
     username = request.data['username'] 
     password = request.data['password'] 
     user = authenticate(username=username, password=password) 
     if user is not None: 
      login(request, user) 
      serializer = self.serializer_class(user) 
      return Response(serializer.data, status=status.HTTP_200_OK) 
     raise AuthenticationFailed 

Ich rufe erfolgreich Backend-API und meine login Ansicht gibt die erfolgreiche Antwort.

Auch request.user wird nach dem Login aktualisiert, aber wenn ich versuche, die anderen APIs Angular mit anzurufen oder direkt sehen Django API Benutzer Rest ist nicht angemeldet.

Answer 1

Die Antwort auf diese Frage ist CSRF-Token an die anhängen X-CSRF-Header, weil Django den X-CSRF-Tokenkopf verwendet, um die Sitzungen zu verifizieren.

mich nicht genau erinnern, wo ich das sah aber Iachieved dies durch angular2-cookie verwenden und einen benutzerdefinierten Anforderungsoption Service wie diese

// Custom request options service 
import { CookieService } from "angular2-cookie/services/cookies.service"; 
import { Headers, RequestOptions } from "@angular/http"; 
import { Injectable } from "@angular/core"; 

@Injectable() 
export class CustomRequestOptionsService { 

    constructor(
     private cookieService: CookieService 
    ) { } 

    defaultRequestOptions() { 
     return new RequestOptions({ 
      headers: new Headers({ 
       'Content-Type': 'application/json', 
      }), 
      withCredentials: true 
     }); 
    } 

    authorizationRequestOptions() { 
     return new RequestOptions({ 
      headers: new Headers({ 
       'Content-Type': 'application/json', 
       'X-CSRFToken': this.cookieService.get('csrftoken') 
      }), 
      withCredentials: true 
     }); 
    } 
} 

und dann in Ihrem Dienst zu schreiben, wo Sie sicherten APIs getroffen verwendet es wie folgen

// Officer service 
import { Http, Response} from "@angular/http"; 
import { Injectable } from "@angular/core"; 
import "rxjs/add/operator/map"; 

// Services 
import { CustomRequestOptionsService } from "../shared/custom-request-options.service"; 

@Injectable() 
export class OfficerService { 
    private officerDashboardUrl = `http://${process.env.API_URL}` + '/api/v1/officers/detail'; 

    constructor(
     private http: Http, 
     private customRequestOptionService: CustomRequestOptionsService 
    ) { } 

    getOfficer(officerId: number) { 
     return this.http.get(`${this.officerDashboardUrl}/${officerId}/`, 
      this.customRequestOptionService.authorizationRequestOptions()) 
        .toPromise() 
        .then((response: Response) => { 
         return response.json(); 
        }) 
        .catch((error: any) => { 
         return Promise.reject(error.message || error) 
        }); 
    } 
}