Criei um aplicativo Django de back-end e atualmente estou trabalhando para conectar um front-end Angular que solicita dados das APIs configuradas usando a estrutura de descanso do Django e encontrou o problema que meus usuários logados (no back-end , o logon no front-end não importa) recebe 403 em todas as solicitações posteriores à API. O que eu acho que é por causa da proteção CSRF no Django.

Eu olhei para um tópico que abordou exatamente esse problema e tentei implementar a soluçãodeste tópico sem sorte.

Usuários desconectados podem enviar solicitações posteriores para registrar ou fazer login corretamente. Mas quando um usuário conectado tenta obter um 403. O envio dos mesmos dados durante a navegação na API DRF é bem-sucedido, e é por isso que acho que está relacionado ao CSRF. Para ficar um pouco mais claro, se eu estiver logado como usuário no front-end e tentar fazer login ou registrar um novo usuário (essas partes não estão bloqueadas no desenvolvimento), recebo uma resposta 403. Se eu estiver conectado à API navegável e enviar exatamente o mesmo conteúdo posterior, ele trabalha com êxito na tentativa de efetuar login novamente ou registrar um novo usuário.

Pode ser por causa do cabeçalho personalizado que estou adicionando que pode estar substituindo o cabeçalho CSRF? Nesse caso, como posso refazê-lo, pois esse cabeçalho é necessário, ou então recebo um tipo de mídia 415 não suportado.

Aqui está o serviço Angular que fornece a função que envia uma solicitação de login ao servidor:

import { Injectable } from '@angular/core';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators'
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Userlogon } from '../_models/Userlogon';
import { User } from '../_models/User';

const HttpOptions = {
  headers: new HttpHeaders({ "Content-type": "application/json" })
};

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  loginobject: any;
  private usersUrl= '/api/v1/accounts/';
  private logonUrl= '/api/v1/auth/login/';
  private logoutUrl= '/api/v1/auth/logout/';

  constructor(
    private http: HttpClient
  ) { }

  login(username: string, password: string) {
    this.loginobject=JSON.stringify({"username": username, "password": password});
    return this.http.post<any>(this.logonUrl, this.loginobject, HttpOptions)
      .pipe(map(user => {
        if (user){
          console.log("If statement satisfied");
          localStorage.setItem('currentUser', JSON.stringify(user));

        }
        return user;
      }));
  }

  logout(){
    localStorage.removeItem('currentUser');
    return this.http.get<any>(this.logoutUrl).subscribe(response => console.log(response));
  }
}

Aqui está o módulo do aplicativo em que eu implementei as opções do provedor:

import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { HttpModule, XSRFStrategy, CookieXSRFStrategy } from '@angular/http'

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { RegisterComponent } from './register/register.component';
import { LoginComponent } from './login/login.component';
import { AlertComponent } from './_directives/alert.component';
import { ProfileComponent } from './profile/profile.component';
import { AuthGuardService } from './_guards/auth-guard.service';
import { AlertService } from './_services/alert.service';
import { AuthService } from './_services/auth.service';
import { UserService } from './_services/User.service';

@NgModule({
  declarations: [
    AppComponent,
    RegisterComponent,
    LoginComponent,
    AlertComponent,
    ProfileComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule,
    HttpClientModule,
    HttpModule
  ],
  providers: [
    {
      provide: XSRFStrategy,
      useValue: new CookieXSRFStrategy('csrftoken', 'X-CSRFToken')
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Aqui está o modelo que o Django processa:

{% load static %}
{% csrf_token %}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>AngularWebapp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<body>
  <app-root></app-root>
{% block javascript %}
<script type="text/javascript" src="{% static 'runtime.js' %}"></script><script type="text/javascript" src="{% static 'polyfills.js' %}"></script><script type="text/javascript" src="{% static 'styles.js' %}"></script><script type="text/javascript" src="{% static 'vendor.js' %}"></script><script type="text/javascript" src="{% static 'main.js' %}"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
{% endblock %}
</body>
</html>

E, finalmente, o código de exibição do Django:

from django.shortcuts import render
from django.contrib.auth import authenticate, login, logout
from rest_framework import permissions, viewsets, status
from rest_framework.views import APIView
from rest_framework.response import Response
from authentication.models import Account
from authentication.permissions import IsAccountOwner
from authentication.serializers import AccountSerializer, LoginSerializer
from getorgname import scrapeorg, idgenerator
import json

# Create your views here.

class AccountViewSet(viewsets.ModelViewSet):
    lookup_field='username'
    queryset=Account.objects.all()
    serializer_class= AccountSerializer

    def get_permissions(self):
        if self.request.method in permissions.SAFE_METHODS:
            return (permissions.AllowAny(),)

        if self.request.method == 'POST':
            return (permissions.AllowAny(),)

        return (permissions.IsAuthenticated(), IsAccountOwner(),)

    def create(self, request):
        serializer=self.serializer_class(data=request.data)

        if serializer.is_valid():
            newuser=serializer.validated_data
            Account.objects.create_user(
                username=newuser.get('username'),
                email=newuser.get('email'),
                org_name=scrapeorg(newuser.get('org_number')),
                org_number=newuser.get('org_number'),
                cid=idgenerator(),
                utype=newuser.get('utype'),
                password=newuser.get('password'),
                )
            #Account.objects.create_user(**serializer.validated_data)

            return Response(serializer.validated_data, status=status.HTTP_201_CREATED)

        return Response({
            'status': 'Bad request',
            'message': 'Account could not be created with received data',
        }, status=status.HTTP_400_BAD_REQUEST)

class LoginView(APIView):
    def post(self, request):
        #data=json.loads(request.body)
        serializer=LoginSerializer(data=request.data)
        if serializer.is_valid():
            data=serializer.validated_data
            username=data.get('username')
            password=data.get('password')

            account=authenticate(username=username, password=password)

            if account != None:
                login(request, account)

                serialized = AccountSerializer(account)

                return Response(serialized.data)

            else:
                return Response({
                    'status': 'Unauthorized',
                    'message': 'Username %s and password invalid' % username 
                }, status=status.HTTP_401_UNAUTHORIZED)
        return Response({
                'status': 'Bad request',
                'message': 'Invalid data for a login request',
            }, status=status.HTTP_400_BAD_REQUEST)

class LogoutView(APIView):
    def get_permissions(self):
        return (permissions.IsAuthenticated(), IsAccountOwner(),)
    def get(self, request):
        logout(request)
        return Response({
            'status': 'Success',
            'message': 'Successfully processed logout request',
        })