nuxt.js - Axios interceptor not working when extending Nuxt Auth plugin

Question

I have a Axios plugin like so:

export default function ({ $axios, $auth }) {
  $axios.interceptors.request.use((req) => {
    req.data = {
      data: {
        // some data
      }
    }
    console.log('auth: ', $auth)

    return req
  })

  $axios.defaults.headers['Content-Type'] = 'application/vnd.api+json'
  $axios.defaults.headers.Accept = 'application/vnd.api+json'
}

In my nuxt.config I have:

plugins: [
  { mode: 'client', src: '~/plugins/axios' }
],

When I run my request I get a auth undefined.

So I try to extend the Nuxt Auth plugin:

auth.js:

export default function ({ $auth }) {
  if ($auth.loggedIn) {
    console.log('loggin in')
  } else {
    console.log('not loggin in')
  }
}

nuxt.config.js:

plugins: [
  // { mode: 'client', src: '~/plugins/axios' }
],

auth: {
  plugins: [{ src: '~/plugins/axios', ssr: true }, '~/plugins/auth.js'],
  // strategies etc..
}

So I comment the Axios plugin, and I add it to the auth section as shown on the Nuxt Auth docs. When I run the request it doesn't log the console.log('auth: ', $auth) skipping the whole $axios.interceptors.request.use((req) => {

question from:https://stackoverflow.com/questions/65854306/axios-interceptor-not-working-when-extending-nuxt-auth-plugin

Answer 1

finally, the chance for me to help someone out XD #just-signed-up. heres the code i use to access auth from within the axios interceptor

nuxt.config.js

auth: {
  plugins: [{ src: '~/plugins/axios.js', ssr: true }, '~/plugins/auth.js']
}

auth.js

export default function ({ $auth }) {
    if ($auth.loggedIn) {
        return true
    } else {
        return false
    }
}

axios.js

export default function ({ $axios, redirect, $auth }) {
  $axios.onRequest(config => {
    console.log('Making request to ' + config.url)
  })

  $axios.onError(error => {
    const code = parseInt(error.response && error.response.status)
    if (code === 401) {
      if ($auth.loggedIn) {
        $auth.logout()
      }
      redirect('/login');
    }
    if (code === 404) {
      redirect('/404')
    }
  })
}