CODEWITHSUNDEEP
laravelvue.jsaxios
Progressive
Progressive

Reputation: 107

axios request header not set after page refresh with vue

So, I ran into a problem.

I have a vue frontend which calls api on laravel. To deal with a page refresh to automatically login the user again if the token is still valid I store it in my local storage.

However once I refresh the page the header isnt set. I have to go on page back in my app (simple button with vue-router) and then it works again.

This is the code I am using

axios.interceptors.request.use(function(config) {
  const token = localStorage.getItem('token');

  if(token !== null) {
    const bearerToken = JSON.parse(localStorage.getItem('token'));
    const bearer = "Bearer " + bearerToken.token;
    config.headers.Authorization = bearer;
  }
    return config
})

The localStorage containing the token is there 100%. It sits in my main.js, so there is 0 chance it doesnt get loaded. Yet, when I put console.log("set header") in my axios.interceptor it doesnt get called upon page refresh as well. Am I overlooking sth?

Upvotes: 0

Views: 1918

Answers (1)

kachi_dk
kachi_dk

Reputation: 413

Set the Axios defaults in the router/index.

Upvotes: 0

Related Questions