Fetch data from local storage

Unable to fetch data from local storage after setting it as Axios response.
The data can be accessed over a page refresh.

I used to set the token for request in the main.js as follows:
indent preformatted text by 4 spaces

   Vue.prototype.$http.defaults.headers.common["Authorization"] =
   "Bearer " + token;

how to fix this problem?

  1. Axios is used to get data over http asynchronously.
  2. Local storage data is stored in the browser’s memory.
  3. No http request-response mechanism is required to get data from local storage.
  4. Follow the link below on how to use local storage
   https://forum.vuejs.org/t/where-is-the-app-constructor/84570/2?u=sujan

I think the issue wasn’t fully conveyed.
After successful authentication, the token gets saved in the local storage and while accessing an authenticated route the token seems to be missing in the request.
If I refresh the page the token gets attached to the request.
Hope you got my issue?

I think your problem is with localStorage not being reactive. Do you have a mechanism to save your token either as data or to a Vuex store?

Using vuex am saving the data in the store.
and retrieves the token like this
getToken(state) {

var token = "";

if (state.token !== "" && state.status !== "") {

  token = state.token;

} else {

  token = localStorage.getItem("token");

}

return token;

}

get the token from created or mounted hook. you will get it.

1 Like