CODEWITHSUNDEEP
javascriptvue.jsvuejs2axios
user10090131
user10090131

Reputation:

Problem when modifying axios default headers globally - Vue

In main.js

import axios from 'axios';

axios.defaults.headers.common = {
    'Authorization': 'JWT ' + Vue.auth.getToken()
};

axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //TODO: append the trailing slash

// Add modified axios instance to Vue prototype so that to be available globally via Vue instance
Vue.prototype.$http = axios;

Everything works fine up to this point. (I am able to successfully login and store the token)

Now, I have another component that fetches a list of users from the server through an ajax call performed on component’s created() lifehook. My problem is that when I am trying to access this.$http in component I get back a 401 error response from the server because Authorization header is not available to the request headers (although I have pre-configured axios.defaults.headers.common)

The strange thing is that if I hit the refresh button on my browser then the token is correctly attached to the request header and the list of users is successfully fetched**.**

Could anyone please explain to me why is that happening?

Upvotes: 11

Views: 10824

Answers (3)

Daniel Richter
Daniel Richter

Reputation: 358

You can create a class to add the headers of your choice globally.

import axios from 'axios';

/**
 * A wrapper around an axios instance, preconfigured to have a base URL and auth headers
 */
class Axios {
    constructor(baseUrl, bearerToken) {

        return axios.create({
            baseURL: baseUrl,
            headers: {
                Authorization: `Bearer ${bearerToken}`
            }
        });
    }
}

export default Axios;

Then in your app.js

import { Axios } from 'my/class'


const myService = new Axios('baseURL', 'bearerToken');

Upvotes: 2

Navaneeth Vijay
Navaneeth Vijay

Reputation: 326

You can user axios request interceptors to add your headers globally

axios.interceptors.request.use(function (config) {
// Do something before request is sent
  return config;
}, function (error) {
// Do something with request error
   return Promise.reject(error);
});

you can access your current request readers using config.header and you can set the headers to the request like 

config.headers = {
   'Authorization': 'JWT ' + Vue.auth.getToken()
}

https://github.com/axios/axios

Upvotes: 2

chrfs
chrfs

Reputation: 402

Have you tried using asios.create?

http/index.js:

import axios from 'axios'
import env from '../config/env'
import store from '../store'

export default (() =>
  axios.create({
    baseURL: env.API_HOST,
    headers: {
      common: {
        Authorization: store.getters['user/getAuthToken']
      }
    }
  }))()

main.js:

import http from './http'

Vue.prototype.$http = http

Additionally I use a store action to update the axios client: 

updateHTTPClientAuthToken () {
  Vue.prototype.$http.defaults.headers.common.Authorization = this.getters.getAuthToken
}

Upvotes: 0

Related Questions