Ax ios JWT не отправляет

Question

У меня проект разделен на два слоя. Бэкэнд разработан в Spring boot, защищен безопасностью Sprint и JWT, а интерфейс разработан в Vue. js с использованием библиотеки Ax ios для связи между слоями.

Я правильно получаю аутентификацию "Bearer token", и весь процесс аутентификации выполнен правильно. Проблема возникает, когда я пытаюсь отправить запрос с заголовком токена для доступа к содержимому, но токен не отправляется, и загрузка Spring возвращает null без содержимого.

Вот код:

getOffers: function () {
    if (localStorage.getItem("userSession")) {
      this.aux = JSON.parse(localStorage.getItem("userSession"));
      this.token = this.aux.token;
      this.tokenHeader = "Bearer "+this.token;
      alert(this.tokenHeader)
    };
    console.log(`Bearer ${this.token}`)
    axios.
    get('http://localhost:8080/api/v1/offer', {'Authorization' : `Bearer ${this.token}`})
            .then(response => {
              console.log(response);
              this.offers = response.data
            }).catch(e => console.log(e))
  }

PS: Когда я делаю запрос в Postman, он отлично работает и возвращает нужный объект. Вот пример почтальона: почтальон

Answer 1

Правильный способ передачи заголовка:

axios.get(uri, { headers: { "header1": "value1", "header2": "value2" } })

В вашем случае попробуйте следующее:

axios.get('http://localhost:8080/api/v1/offer', { headers:{Authorization : `Bearer ${this.token}`} })

Также проверьте в консоли, дает ли это правильный Bearer токен:

console.log(`Bearer ${this.token}`)

Answer 2

Зарегистрируйте токен-носитель в качестве общего заголовка с помощью Ax ios, чтобы он автоматически присоединялся ко всем исходящим HTTP-запросам.

window.axios = require('axios')
let bearer = window.localStorage['auth_token']

if (bearer) {`enter code here`
    window.axios.defaults.headers.common['Authorization'] = 'Bearer ' + bearer
}

И не нужно отправлять токен-носитель при каждом запросе.