Nuxt.js: axios plugin

[aymenpeak]

Can anyone point the problem here .. axios does not fetch the token in every request like it supposed to do.

there is my plugin/interceptors.js

and there is how i added id in the config file

_{This question is available on Nuxt.js community (#c371)}

[Atinux]

Hi @aymenpeak

The interceptors.js plugin is not called when your import axios from 'axios'.

Here an example:
plugins/axios.js

import axios from 'axios'
import store from '~store'

let instance = axios.create()

if (process.BROWSER_BUILD) {
  const swal = require('sweetalert2')
  instance.interceptors.request.use(
    (config) => {
      if (store.getters.authToken) {
        config.headers.common['Authorization'] = `Bearer ${store.getters.authToken}`
      }
      return config
    },
    (error) => Promise.reject(error)
  )
  instance.interceptors.response.use(
    response => response,
    (error) => {
      if (error.response.status >= 500) {
        swal({
          type: 'error',
          title: 'Oops...',
          html: 'Something went wrong! Please try again.'
        })
      } else if (error.response.status === 401 && store.getters.authUser) {
        swal({
          title: 'Session Expired!',
          html: 'Please log in again to continue.',
          allowOutsideClick: false
        })
        .then(() => store.dispatch('logout'))
        .catch(swal.noop)
      }
      return Promise.reject(error)
    }
  )
}

export default instance

Then, in your components, you need to import axios like this: import axios from '~plugins/axios'

Also, think to add axios in the vendor bundle:

nuxt.config.js

module.exports = {
  build: {
    vendor: ['axios']
  }
}

[ausir0726]

hi , but I can set interceptors without instance .
like this demo a random header Authorization

but in my production , I also use instance setting interceptors and collect my http request , just like @Atinux .

[aymenpeak]

thanx for answering but my problem is that i get the token from server successfully but when i used in an other action in the store returns undefined.

there is my login function

the action saveToken works perfectually but inside fetchUser the state.token is undefined knowing that when i log te state.token in the end of saveToken it return my token correctly.
.I think its a matter of synchronization.

Sorry i know its out of nuxt.js but i really need helps ...

[ausir0726]

if you can build a simple project with problem you want to resolve on github
( include API server will be better )
that will be easier test or resolve your problem .
thanks.

[Atinux]

@aymenpeak can you show us your saveToken action?

[aymenpeak]

there is my store file

and there is the types

[Atinux]

You should not use state from the variable but directly from your fetchUser method:

fetchUser ({ state, commit }) {
  console.log(state)
  // ...
}

[aymenpeak]

yeah my bad buts there is no change , when i call a getter in my axios plugin its always undefined

line 11
...

[aymenpeak]

i solved the problems by adding a test on the cookies.get() in my store file , turn out when she returns undefined that undefined never be overwrited

[OrangeXC]

I use the vuex store Modules, but I can't get

import store from '~store'

I have try

import store from '~/store/user'

but I can't use store's method

I only want get user/token and use dispatch method

what should I do?

[aymenpeak]

@OrangeXC this one of the breaking changes in the version 1.0.0-alpha.4 .
now u have access to the store and the router in the middlewares and plugins like this

export default ({app: {router}, store}) => {
// here the store and the router are available
} 

[OrangeXC]

@aymenpeak Thank you, I solved it, I think @nuxtjs/axios is a better way to solve auth problem.

[lukasborawski]

@OrangeXC @aymenpeak how to deal with

const instance = axios.create({
  baseURL: process.env.baseUrl,
  timeout: 20000
})

instance.interceptors.request.use(config) => {
... 

export default instance

where to import store and how?

[lukasborawski]

@Atinux how to deal with your first example to pass the store to the new nuxt version, which is {store} notation?

[Chaoyingz]

how to use store state with this interceptors @Atinux

[awronski]

@Caoyiii if you use axios-module you can easly access store from the interceptors:

export default function ({ $axios, app, store }) {
  $axios.onRequest(config => {
    //do something with the store
    console.log(store.state.someValue)
  })
}

[gomezmark]

Hi,

what should i do?

function  verifyCode ({app, commit}, data) {
    let post =  querystring.stringify(data);

    return  this.$axios.$post('/login/otp', post)
                    .then(
                        data => {
                            Cookie.set('token', data.data.user.token);

                            console.log(this.$store)
                            this.dispatch('profile/getUserDetails',{},{root: true, credentials : true});
                        },
                    );
}

when calling the getUserDetails,
the token from cookie is null.

on the ~/plugis/axios

import Cookie from 'js-cookie';
export default function ({ $axios, redirect }) {
    let __token = Cookie.get("token");
    axios.defaults.headers.common.Authorize = __token;

....

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.