Problem setting API client authorization key in axios

1
votes

The API is developed using Laravel, I am currently implementing authorization logic using Laravel Passport. the client application is a Vuejs application, Http calls are done using axios.

Passport is perfectly returning a token (i'm using client credentials type of grants). axios offers a way to set default headers by setting axios.defaults.headers.common array. Here is my axios call (implemented in 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
})

However, all subsequent axios calls are missing the Bearer token header.

1
vue.jsaxioslaravel-passport

1 Answers

0
votes

You may try to create an axios instance with custom config: https://github.com/axios/axios#creating-an-instance

Example:

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

and use it just like you would normally do:

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

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