Проблема установки ключа авторизации клиента API в axios

Question

API разработан с использованием Laravel, в настоящее время я реализую логику авторизации с использованием Laravel Passport. клиентское приложение является приложением Vuejs, Http-вызовы выполняются с использованием axios.

Passport отлично возвращает токен (я использую тип предоставления прав доступа клиента). Axios предлагает способ установить заголовки по умолчанию, установив массив axios.defaults.headers.common. Вот мой вызов axios (реализован в bootstrap.js)

async function a() {
    var ret = "";
    await axios
        .post("/oauth/token", {
            "client_id": 7,
            "client_secret": "2GmvfxQev7AnUyfq0Srz4jJaMQyWSt1iVZtukRR6",
            "grant_type": "client_credentials",
            "scope": "*"
        })
        .then((resp) => {
            ret =  resp.data.access_token;
        })
    return ret; 
}
a().then((res) => {
    console.log(res) //this perfectly loggs the token to the console.
    axios.defaults.headers.common["Authorization"] = "Bearer " + res
})

Однако во всех последующих вызовах axios отсутствует заголовок токена Bearer.

Answer 1

Вы можете попытаться создать экземпляр axios с пользовательской конфигурацией: https://github.com/axios/axios#creating-an-instance

Пример:

const axios = require('axios').create({
    headers: {
        'Authorization': 'Bearer: ' + token
    }
});

и использовать его так же, как вы обычно делаете:

axios.get(url).then(resp => {
    //response handler
});

axios.post(url, data).then(resp => {
    //response handler
});