Как отправить токен с AJAX-запросом с помощью jQuery

Question

Я использую библиотеку express-jwt для защиты маршрутов и создаю свой токен через jQuery, сохраняя его в localStorage следующим образом:

$.ajax({
  url: "http://localhost:8080/login",
  type: 'POST',
  data: formData,
  error : function(err) {
    console.log('Error!', err)
  },
  success: function(data) {
    console.log('Success!')
    localStorage.setItem('token', data.id_token);
  }
});

У меня есть защищенный маршрут на сервере, который выглядит так:

app.get('/upload', jwt({secret: config.secret}), function(req, res) {
  res.sendFile(path.join(__dirname + '/upload.html'));
});

Как я могу отправить токен из localStorage в заголовке запроса?

Answer 1

Если вы используете аутентификацию JWT, то вот как добавить токен в заголовки метода .ajax():

headers: {
    Authorization: 'Bearer ' + token
}

Таким образом, вы передаете ваш токен в заголовке Authorization, что позволяет серверу распознать и аутентифицировать запрос. Не забудьте заменить token на ваш фактический JWT токен.

Answer 2

Ваш код выглядит в целом правильно, но я заметил несколько моментов, которые можно улучшить. Во-первых, в вашей функции обработки ошибок вы используете err.status как строку, тогда как этот статус обычно возвращается как число. Попробуйте привести его к числу для более точного сравнения. Также, я бы добавил более подробные действия в каждом случае обработки ошибок, чтобы упростить диагностику.

Вот исправленный вариант вашего кода:

$.ajax({
  url: "http://localhost:8080/login",
  type: "POST",
  headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
  data: formData,
  error: function(err) {
    const statusCode = err.status; // статус код как число
    switch (statusCode) {
      case 400:
        console.error("Ошибка 400: Неверный запрос.");
        // Обработка ошибки 400
        break;
      case 401:
        console.error("Ошибка 401: Неавторизован.");
        // Обработка ошибки 401
        break;
      case 403:
        console.error("Ошибка 403: Доступ запрещен.");
        // Обработка ошибки 403
        break;
      default:
        console.error("Произошла неизвестная ошибка: ", statusCode);
        // Обработка остальных ошибок
        break;
    }
  },
  success: function(data) {
    console.log("Успех!");
    // Дополнительная обработка успешного ответа
  }
});

Теперь обработка статусов выполнена с учётом того, как они обычно представлены. Также я добавил сообщения в console.error, чтобы вам было легче понять, что именно происходит при возникновении ошибок. Надеюсь, это поможет вам лучше справляться с ошибками при работе с JWT аутентификацией.

Answer 3

Вы также можете сделать это так:

$.ajax({
    type: 'get', // или любой другой метод, который вам нужен
    dataType: 'json',
    beforeSend: function (xhr) {
        xhr.setRequestHeader("Authorization", "Bearer " + token);
    },
    url: `ваш-эндпоинт`,
    success: (data, status, xhr) => {
        if (data.status) {
            // Выполните действия
        } else {
            console.warn("AJAX запрос не удался");
        }
    },
    error: (xhr, textStatus, errorMessage) => {
        console.log(xhr.responseJSON.message);
    }
});

Обязательно замените ваш-эндпоинт на актуальный URL. Этот код отправляет GET-запрос с использованием AJAX и обрабатывает результаты.

Как отправить токен с AJAX-запросом с помощью jQuery

3 ответ(ов)

Руководство по Markdown

Форматирование текста

Код

Списки

Поддерживаемые языки программирования

Популярные

Другие .NET

Базы данных