When refreshing the page, the authentication token set in the Vuex store using axios in Nuxt.js/Vue.js gets reset

Question

When refreshing the page, the authentication token set in the Vuex store using axios in Nuxt.js/Vue.js gets reset

Here is the code snippet I am using to manage login, logout, user retrieval, and token setting for all axios requests as an auth header.

While this code works perfectly during client-side rendering - such as logging in, storing the token in cookies, etc. - I encounter an issue when refreshing the page where it seems that the token is not being set anymore. Even calling the fetch action on NuxtServerInit doesn't help. Can anyone spot where my code might be going wrong?

This is the content of my store/index.js file:

https://jsfiddle.net/3dc07yv4/

import Cookie from 'cookie'
import Cookies from 'js-cookie'

export const state = () => ({
  sidebar: true,
  token: null,
  user: null
})

export const mutations = {
  // CODE FOR TOGGLING SIDEBAR, SETTING USER, AND TOKEN
}

...

javascript vue.js axios vuex nuxt.js

Answer 1

Answer №1

To tackle this issue, I came up with a solution that involves integrating an interceptor to automatically add the token to headers for every axios request. Here's how it works:

export default ({ $axios, store }) => {
  $axios.defaults.baseURL = 'https://example.com/api/'

  if (process.server) {
    return
  }

  $axios.interceptors.request.use(request => {
    request.baseURL = 'https://example.com/api/'

    // Retrieve token from auth.js store
    const token = store.state.token

    // Update axios header with token
    if (token) {
      request.headers.common['Authorization'] = token
    }
    return request
  })
}

This can be utilized as a nuxt plugin.

Answer 2

To tackle this issue, I came up with a solution that involves integrating an interceptor to automatically add the token to headers for every axios request. Here's how it works:

export default ({ $axios, store }) => {
  $axios.defaults.baseURL = 'https://example.com/api/'

  if (process.server) {
    return
  }

  $axios.interceptors.request.use(request => {
    request.baseURL = 'https://example.com/api/'

    // Retrieve token from auth.js store
    const token = store.state.token

    // Update axios header with token
    if (token) {
      request.headers.common['Authorization'] = token
    }
    return request
  })
}

This can be utilized as a nuxt plugin.

Answer 3

Answer №2

Upon encountering the same issue, I made a discovery. Although setting headers in each request was initially working for me, when navigating to the secondary page of a nested route, the token would mysteriously vanish.

const service = axios.create({
    baseURL: 'http://127.0.0.1:9012',
    timeout: 30000, 
    headers: {'Authorization': 'Bearer '+ getUser().token  }
  })

Answer 4

Upon encountering the same issue, I made a discovery. Although setting headers in each request was initially working for me, when navigating to the secondary page of a nested route, the token would mysteriously vanish.

const service = axios.create({
    baseURL: 'http://127.0.0.1:9012',
    timeout: 30000, 
    headers: {'Authorization': 'Bearer '+ getUser().token  }
  })

When refreshing the page, the authentication token set in the Vuex store using axios in Nuxt.js/Vue.js gets reset

Answer №1

Answer №2

Similar questions

Creating reactive Arrays in VueJSIn this guide, we will discuss methods

Steps for creating new users using a post request

When displaying text pulled from MYSQL in a div, white space is eliminated

What is the best way to display a child component for every object while considering specific conditions?

CSS or jQuery: Which is Better for Hiding/Showing a Div Within Another Div?

I am facing issues with my submit buttons as they are not functioning

Adjust the image to stretch and crop appropriately to perfectly fit the specified dimensions

Leverage the Power of Two AngularJS Factories

I'm having trouble getting EJS files to run JavaScript module scripts

Using the Spread Operator to modify a property within an array results in an object being returned instead of

Best practices for handling APIs in Vue

When using jQuery to select elements of a specific class, make sure to exclude the element that triggered the

Maximizing the potential of AngularJS directives while maintaining a seamless connection to the controller

Leveraging ES6 Generators for Efficient XMLHttpRequests

Unable to fetch data using getJSON method

The dimensions of the box are not predetermined by the size of the photo

How can I prevent my Vue.js application from losing focus when navigating to different components?

Implementing icon display upon click in a Meteor application

Vue: Opening all GmapInfoWindows simultaneously upon clicking one

Modifying the file name during the download process using AngularJS