Передача данных из контекстного словаря представления django в компоненты react

Я пытаюсь создать Django и React full stack web app и использую Django rest framework для создания API и с ними очень легко работать, когда дело доходит до отправки данных, но для системы входа и выхода из системы это становится очень сложным в работе, так как мы не можем получить запрос. пользователя из обычного fetch запроса от react. и также передача данных из контекстного словаря представления в react также становится слишком сложной для меня. У меня есть представление для отображения index.html, управление которым берет на себя react, и я хочу отправить информацию о том, аутентифицирован ли пользователь или нет, в мой компонент react, как я могу это сделать? Вот как выглядит мой вид 

def index(request):
    authenticated = False
    if request.user.is_authenticated:
        authenticated = True
    context = {
        'authenticated':authenticated
    }
    return render(request,'index.html',context)

Я хочу передать аутентификацию в компонент react, как мне это сделать? Я передал его обычному js в index.html, но не знаю, как передать его компоненту react. Вот как выглядит мой index.html:

<!DOCTYPE html>
       <html lang="en">
       <head>
           <meta charset="utf-8" />
           <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <meta name="theme-color" content="#000000" />
           <meta
               name="description"
               content="Web site created using create-react-app"
           />
           <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
          
           <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
   
           <link rel="preconnect" href="https://fonts.googleapis.com"> 
           <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
           <link href="https://fonts.googleapis.com/css2? 
           family=Encode+Sans+Expanded:wght@400;700&display=swap" rel="stylesheet">
           <title>React App</title>
           <script>
               var authenticated = "{{authenticated}}"
               console.log(authenticated)
           </script>
      </head>
      <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
     </body>
     </html>

консоль показывает мне "True", но как я могу передать его в мой файл App.js в react?

Существует несколько способов передачи переменных Django в компонент react :

  1. Вызов без запроса : Обратитесь к этому посту , он поможет вам.

  2. с вызовом запроса, как API или другие конечные точки :

    .

В вашем views.py файле 

from django.http import JsonResponse

def is_authenticated(request):
    authenticated = False
    if request.user.is_authenticated:
        authenticated = True
    data = {
        'authenticated':authenticated
    }
    return JsonResponse(data)

в вашем app.js файле 

async function IsAuthenticated() {
    // Change the url to fit your needs
    const url = 'http//127.0.0.1:8000/';
    try {
        const response = await fetch(url);
        const data = await response.json();
        console.log(data);
        // Do some stuff with data dict
    } catch (error) {
        console.error(error);
    }
}
Вернуться на верх