I have a VueJS component that makes an AJAX call to GitHub using the following code:
(Child) Component
Vue.http.get('user/repos').then((response) => {
console.log(response);
}, (response) => {
console.log(response);
});
The issue is that I need to obtain an access token before making this AJAX call. The access token is stored in the database, so my main Vue component makes an AJAX call to set a common header for all requests:
Main Vue Instance
Vue.http.headers.common['Authorization'] = `token ${this.token}`;
const app = new Vue({
el: '#app',
data: {
token: ''
},
created() {
Vue.http.get('/token').then((response) => {
this.token = response.data.token;
}, () => {
console.log('Failed to retrieve the access token for the logged-in user.');
})
}
});
How can I ensure that the AJAX call to set the 'Authorization' header is successful before making the AJAX call from my component?