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

jQuery - Password Validation

How can I enable a constant condition in eslint?

Check the validity of a watched variable's value and block any assignments that do not meet the specified requirements without triggering the watch function

The power of Three.js comes alive when utilizing appendChild and returning elements

Error: Loop Program Encountered Unexpected Token Syntax

What's the best way to utilize multiple environment files in a Next.js application?

Why do Vue/Nuxt Select field states come pre-set as valid?

Displaying a JSON array response on an HTML page with JavaScript and jQuery

How can you pass an authorization token in a Next.js post request when using Django REST framework?

What is the technique for hiding the bottom tab navigator upon leaving a specific screen in React Native version 5?

Learn the steps to designing a responsive class using Angular2's ngClass feature

What steps can be taken to revert this Node.js module to a particular version and ensure it does not automatically update in

Sending a JavaScript string to a PHP script from a Chrome extension content script

Strategies for removing duplicate items from an array of objects

Instructions on incorporating domains into next.config.js for the "next/image" function with the help of a plugin

What is preventing me from translating JS Canvas Image?

Clicking on a React Material UI ListItem

enabling input field while making asynchronous requests with jQuery

Merging angular-file-upload with multer

Complicated "as-label" for understanding expressions in Angular