How to set $axios token with Nuxt auth module?

Question

Untill recently I used my own register/login implementation in my Nuxt project, where after successful register/login I was able to do this.$axios.setToken(token, 'Bearer') and it would set the authorization header globally on axios reguests. Now I had to refactor the app and use Nuxt auth module. But now it seems I can't set this header.

This is my auth configuration:

auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/auth/local', method: 'post', propertyName: 'jwt' },
          logout: false,
          user: { url: '/users/me', method: 'get', propertyName: false }
        },
      }
    },
    redirect: {
      login: '/login',
      home: '/home',
      user: '/users/me'
    },
}

I thought auth was supposed to add this authorization automatically, since it has globalToken set to true by default, but it didn't have it. So I tried to specify it explicitly:

tokenRequired: true,
tokenType: 'bearer',
globalToken: true,
autoFetchUser: true

It didn't help. So in the register/login methods I tried to set the token myself, both on axios and $auth modules:

await this.$auth.loginWith('local', {
    data
  }).then(({data}) => {
    this.$apolloHelpers.onLogin(data.jwt)
    this.$axios.setToken(data.jwt, 'Bearer')
    this.$auth.setToken('local', `Bearer ${data.jwt}`)
    ...

Also no effect. Though at some point it seems I was able to send only one request successfully, and I saw it did have the Authorization header on the request, but when I switched page and tried to send another request - again it didn't have the header and the request failed with error 403.

So I tried one more thing - in my default layout, in beforeMount() hook, I tried to check if the user is logged in and if he is - set the header:

if (this.$auth.loggedIn) {
  this.$axios.setToken(this.$auth.getToken('local'))
}

Again one request was sent successfully, but when switched to another page and tried to send another request - 403.

Instead of $axios.setToken() I tried to set Authorization header:

this.$axios.defaults.headers.common.Authorization = `${this.$auth.getToken('local')}`

And again - one request successful, the other - 403

Why is is happening? How can I set that Authorization header to be present on all requests after register/login or if the user refreshes the page and he is already logged in?

Well, I solved the issue. As I stated, I used my own authentication system before refactoring it to use Nuxt's auth module. Apparently, there was some code from my previous implementation left and it was interfering with the new one. Once removed completely - everything worked as it supposed to. — Igal

power-cut power-cut · Accepted Answer · 2020-05-22T19:06:50

Well, one way can be using nuxtServerInit

Once you have fetched the jwt token and saved to either cookies/localstorage, subsequently you can use $axios.setToken.for global access. Below is the sample code to give you an idea.

actions: {
      nuxtServerInit({ dispatch, commit, app }, context) {
        const cookies = cparse.parse(context.req.headers.cookie || '')
        if (cookies.hasOwnProperty('x-access-token')) {
          app.$axios.setToken(cookies['x-access-token'], 'Bearer')
        }
      },
    }

How to set $axios token with Nuxt auth module?

1 Answers