Как отправить токен аутентификации из Frontend с помощью Fetch и Ajax в Restful API Backend?

В настоящее время я работаю с django restframwork, я нахожусь в периоде обучения. Я создал api для системы управления лотереями, используя DRF, и в этот restful api я добавил IsAuthenticated класс разрешения. Сейчас я создаю демо-проект для этого api, теперь я использую ajax для запросов & отправляю авторизацию с помощью btoa. но я уверен, что это не профессиональный метод. Я хотел бы узнать, как отправить токен авторизации на бэкэнд с именем пользователя и паролем. & также как достичь того же в reactjs, так как я немного знаком с react js и работаю над ним также.


function ajaxCall(type, url, data, callback) {
  /**Common Method to handle all the Ajax Requests */
  $.ajax({
    url: url,
    type: type,
    data: data,
    headers: {
    "Authorization": "Basic " + btoa(USERNAME + ":" + PASSWORD)
  },
    success: function (response, status, xhr) {
      console.log(response);
      console.log(xhr);
      if (xhr.status != 204) {
        if (callback) {
          callback(response);
        }
      }
    },
    error: function (xhr, status, error) {
      console.error("Error occurred:", xhr.responseText, status, error);
    },
  });
}

Использование AJAX:

1 - Получение токена: Пройдите аутентификацию с помощью имени пользователя и пароля, чтобы получить токен.

2 - Изменение вызова AJAX:

function ajaxCall(type, url, data, token, callback) {
  $.ajax({
    url: url,
    type: type,
    data: data,
    headers: {
      "Authorization": "Token " + token
    },
    success: function (response) {
      if (callback) callback(response);
    },
    error: function (xhr) {
      console.error("Error:", xhr.responseText);
    },
  });
}

Использование React с Fetch:

async function fetchWithToken(url, method, data, token) {
  const response = await fetch(url, {
    method: method,
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Token " + token
    },
    body: JSON.stringify(data),
  });
  return response.json();
}

Образец ответа API Login:

Успех (200 OK):

{
  "user": {
    "id": 1,
    "username": "your_username",
    "email": "your@email.com"
  },
  "token": "eyJ0eXAiOiJKV1QiLCJh... (JWT token)"
}

Ошибка (401 Unauthorized):

{
  "detail": "Invalid username or password."
}

Чтобы отправить токен аутентификации с фронтенда на бэкенд RESTful API с помощью Fetch и Ajax, вы можете выполнить следующие шаги.

Использование Fetch API

// Assuming the token is stored in localStorage after login
const token = localStorage.getItem('authToken');

fetch('https://api.example.com/endpoint', {
    method: 'GET', // or 'POST', 'PUT', etc.
    headers: {
        'Authorization': `Bearer ${token}`, // Structure depends on your API
        'Content-Type': 'application/json'
    }
})
.then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
})
.then(data => {
    console.log('Success:', data);
})
.catch(error => {
    console.error('Error:', error);
});

Использование jQuery Ajax

// Assuming the token is stored in localStorage after login
const token = localStorage.getItem('authToken');

$.ajax({
    url: 'https://api.example.com/endpoint',
    type: 'GET', // or 'POST', 'PUT', etc.
    headers: {
        'Authorization': `Bearer ${token}` // Structure depends on your API
    },
    dataType: 'json',
    success: function(data) {
        console.log('Success:', data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        console.error('Error:', errorThrown);
    }
});

Надеюсь, этот пример кода помог вам :)

Вернуться на верх