Using axios instance with vuex

Question

I am building a Vue frontend with Rails backend.

On frontend I am using Axios and I have set these interceptors for authentication:

import axios from 'axios'

const API_URL = 'http://localhost:3000'

const securedAxiosInstance = axios.create({
  baseURL: API_URL,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json'
  }
})

const plainAxiosInstance = axios.create({
  baseURL: API_URL,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json'
  }
})

securedAxiosInstance.interceptors.request.use(config => {
  const method = config.method.toUpperCase()
  if (method !== 'OPTIONS' && method !== 'GET') {
    config.headers = {
      ...config.headers,
      'X-CSRF-TOKEN': localStorage.csrf
    }
  }
  return config
})

securedAxiosInstance.interceptors.response.use(null, error => {
  if (error.response && error.response.config && error.response.status === 401) {
    // If 401 by expired access cookie, we do a refresh request
    return plainAxiosInstance.post('/refresh', {}, { headers: { 'X-CSRF-TOKEN': localStorage.csrf } })
      .then(response => {
        localStorage.csrf = response.data.csrf
        localStorage.signedIn = true
        // After another successfull refresh - repeat original request
        let retryConfig = error.response.config
        retryConfig.headers['X-CSRF-TOKEN'] = localStorage.csrf
        return plainAxiosInstance.request(retryConfig)
      }).catch(error => {
        delete localStorage.csrf
        delete localStorage.signedIn
        // redirect to signin if refresh fails
        location.replace('/')
        return Promise.reject(error)
      })
  } else {
    return Promise.reject(error)
  }
})

export { securedAxiosInstance, plainAxiosInstance }

On main.js I am making them available this way:

import VueAxios from 'vue-axios'
import { securedAxiosInstance, plainAxiosInstance } from './axios'
Vue.use(VueAxios, {
  secured: securedAxiosInstance,
  plain: plainAxiosInstance
})
new Vue({
  el: '#app',
  router,
  store,
  securedAxiosInstance,
  plainAxiosInstance,
  render: h => h(App)
})

And in components I can successfully use them like:

this.$http.secured.get('/items')

The problem is that I am unable to use them in store where I get: Cannot read property 'secured' of undefined"

I tried in store among others:

import { securedAxiosInstance, plainAxiosInstance } from '../axios'

    const store = new Vuex.Store({
        secured: securedAxiosInstance,
        plain: plainAxiosInstance,
    .....

What is the correct way to do it?

I have tried a lot of combinations in store and modules, including the same imports I am doing in main.js. But none of them works. — catmal
– catmal, Commented Nov 29, 2019 at 13:50
You can try this._vm.$http.secured.get('/items') or pass the vue instance as payload to your mutation/action — Fab
– Fab, Commented Nov 29, 2019 at 13:57
Yes that fixed it.. If you put it in an answer I will accept it. Can you also please explain it? Thanks! — catmal
– catmal, Commented Nov 29, 2019 at 14:13

Fab · Accepted Answer · 2019-11-29 14:31:15Z

4

You can use this._vm inside the store which refers to the Vue instance of the current application.

So in your case:

this._vm.$http.secured.get('/items')

As alternative you can pass the Vue instance as payload to your mutation/action, like:

this.$store.commit('myMutation',this)

answered Nov 29, 2019 at 14:31

Fab

4,6572 gold badges26 silver badges47 bronze badges

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

1 Comment

Anjayluh Over a year ago

I'm having the same issue but using this gets me a typeError 'cannot read property then of undefined.

Collectives™ on Stack Overflow

Using axios instance with vuex

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related