[Vuejs]-Nuxt.js – accessing store state in axios plugin

3👍

Plugin functions should be pure and should not re-assign the value of $this by using a => (fat arrow).

You can tap into the current $axios instance and set the header whenever a request is made:

// plugins/axios.js
export default function ({ $axios, store }) {
  $axios.onRequest(config => {
    const { token } = store.state

    if (token) {
      config.headers.common.Authorization = `Bearer ${token}`
    }

  })
}

Mind you that $axios is a package provided by @nuxtjs/axios and this.$axios will differ from this.axios if you’ve manually registered axios by its self.

Leave a comment