How to use dynamic auth-header in axios(vue.js)?

Question

I am building an Vue.js app that relies heavily on api calls. I am using axios to make call. I am using a pattern similar this. Basically I have created a service that will be shared by all the components. Following is the service:

//api-client.js

import axios from 'axios'
import store from '../src/store'

let authKey = store.getters.getAuthKey
export default  axios.create({
  withCredentials: false, // This is the default
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    authorization: "Basic "+authKey
  }
})

Now notice I am using a getter to get auth token for the vuex store and seting it in the service.

I will use this service like:

//App.vue
<template>
    <div>
       <!-- some code -->
    </div>
</template>

<script>
import apiClient from "../api-client.js" 
    export default {
        mounted(){
         apiClient.get("#url").then(()={
            // Do Something

         })
      }
    }
</script>

<style lang="scss">

</style>

The situation is, auth key changes every now and then, so I have a setting that will update the auth key in the store. The setting updates the auth key in store successfully, but the key in api-client.js is not updated. It is loaded only once and the update in the store is not cascaded to this api-client.js.

Is there any pattern to solve this? Please suggest.

I'd recommend adding headers before each request (in some kind of middleware of something like that). That way you'd always pull latest token for each request. — zhuber
– zhuber, Commented Aug 23, 2019 at 11:05
I want to achieve ability to configure the auth key at a single place and use it everywhere. If I have to include key in header, that won't serve the purpose. — spark
– spark, Commented Aug 23, 2019 at 11:16
Please look at interceptors for requests in axios documentation. Basically you'd have everything at single place (interceptor) and just append your token on current headers which would happen for each request. I can post a code example once I get home since I'm on mobile now. — zhuber
– zhuber, Commented Aug 23, 2019 at 11:19

zhuber · Accepted Answer · 2019-08-23 12:12:07Z

15

Since your token is dynamic, you can't define it in your axios instance factory headers setup. Best way to handle this globally is to use request interceptors

//api-client.js

import axios from 'axios'
import store from '../src/store'

const apiClient = axios.create({
    withCredentials: false, // This is the default
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
    }
});

apiClient.interceptors.request.use(function (config) {
    // Do something before request is sent
    let authKey = store.getters.getAuthKey
    config.headers["Authorization"] = "Basic " + authKey;
    return config;
});

export default apiClient;

This way interceptor function would occur on each request and would pickup latest version of your authKey;

answered Aug 23, 2019 at 12:12

zhuber

5,5544 gold badges35 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to use dynamic auth-header in axios(vue.js)?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related