Laravel passport, Axios set token in bootstrap.js

I made a Laravel REST api, what I called with axios (in vue app). I made the laravel passport auth in server side, so I have to insert 'Authorization : Bearer xxx...' into the header of ajax calls.

I thought, I made my code as dry as possible, so in my bootstrap.js (where I init the axios) made this code:

function getTokens() {
    axios.get('/oauth/personal-access-tokens')
            .then(response => {
                  // window.usertokens = response.data;
                  if(response.data && response.data[0]&& response.data[0].id) {
                    var tokenid = response.data[0].id;
                    var auth = 'Bearer ' + tokenid;
                    window.axios.defaults.headers.common['Authorization'] = auth;
                    window.authToken = auth;
                    if(window.axios.defaults.headers.common['Authorization']) {
                      console.debug("token has been set succesfully. (token=" + window.axios.defaults.headers.common['Authorization'] + ")");
                    }
                  }
              //
            }).catch(e => {
              console.error("gettoken errror: " + e);
            });
};

On the console I wrote that the Authorization is set, BUT when I check the headers of ajax calls, there is no Authorization.

I know the problem is based on the asynchronous call.. But is there any solution, for do it nice? (one time I ask the token and set).

Thx the suggestions and responses in advance!

via Chebli Mohamed