Как инициировать загрузку pdf с помощью api вызова из react frontend в drf backend - django rest framework

У меня есть приложение, которое использует django rest framework для бэкенда и react для фронтенда. Я использую сборку react production и интегрирую ее с django для обслуживания. В моем приложении есть функция загрузки pdf. Я использую xhtml2pdf для генерации pdf. Я обратился к учебнику и написал следующие коды для генерации pdf, которые работают нормально на данный момент

реактивный код ниже href указывает на url в django

 <DownPdf href={`/${cat}/download-pdf/${id}/`}>
          <i className="far fa-file-pdf"></i> Download PDF
 </DownPdf>

urls.py

 path('download-pdf/<str:pk>/', views.download_citation_as_pdf, name='download-pdf'),

views.py

@api_view(['GET'])
# @permission_classes([IsAuthenticated])
def download_citation_as_pdf(request, pk):
    
    try:
        
        query = Civil.objects.get(id=pk)
        
        serial = Full_Detail_Serial(query, many=False)
        
        print(serial.data['title'])
        
        
        data={
            "serial_data" : query,
            "site":request.get_host()
        }
        
        pdf = render_to_pdf('citationPdfEmail.html', data)
        
        # below returns the pdf view in browser
        # return HttpResponse(pdf, content_type='application/pdf')
        
        # to start force download
        if pdf:
            
            print('pdf is returned to the view')
            
            response = HttpResponse(pdf, content_type = 'application/pdf')
            
            filename = f"sl_%s.pdf" %(serial.data['title'])
            
            content = "inline; filename= '%s'" %(filename)
            
            """
            the double quotes is used to enclose %s beacause
            the title may contain commas and other special characters.
            Single quotes cannot be used to enclose %s and double quotes
            should be used other with it will throw an error.
            """
            content = 'attachement; filename= "%s"' %(filename)
            
            response['Content-Disposition'] = content
            
            print('final response has been generated in the view')
            
            return response
        
        return HttpResponse("not found")
        
        

    except Civil.DoesNotExist:
        
        return Response({"error": "citation does not exist"}, status= status.HTTP_400_BAD_REQUEST)
        
    
    except Exception as e:
        print(e)
      
        return Response({"error": str(e)}, status= status.HTTP_500_INTERNAL_SERVER_ERROR)
      

вышеприведенное представление обрабатывает запрос на загрузку, когда пользователь нажимает на ссылку во фронтенде. Теперь этот код инициирует загрузку, только когда я использую href в react build, который фактически перенаправляет на url, связанный с представлением.

Моя проблема

Я хочу, чтобы это представление было доступно только тогда, когда пользователь вошел в систему, а также добавляло некоторую информацию в pdf пользователя, вошедшего в систему. Но проблема в том, что я не могу сделать api вызов к этому представлению, так как оно не инициирует загрузку pdf. Без api вызова я не могу добавить jwt токен в заголовок и использовать классы разрешения для ограничения и получения зарегистрированного пользователя.

Пожалуйста, подскажите мне правильный процесс использования этого представления вместе с react build для ограничения представления только для вошедшего пользователя и инициирования загрузки с помощью api вызова.

const downloadPdf = () => {
    setProgress(10);
    try {
      setProgress(50);
      axiosInstance
        .get(`/${cat}/download-pdf/${id}/`, {
          responseType: "blob",
        })
        .then((response) => {
          setProgress(90);
          let url = window.URL.createObjectURL(new Blob([response.data]));
          let link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", `filename.pdf`);
          document.body.appendChild(link);
          link.click();
          setProgress(100);
        });
    } catch (error) {}
  };