[1818] Cannot initialise Vuex store from localStorage on App initialization for Authentication

Hi Guys,

I'm struggling to initialize my Vuex store with the account details of the logged in user from localStorage.

I've been through as many examples as I can of Auth using Nuxt, and none of them demonstrate how on the client side to pull an authToken from localStorage to re-use with subsequent API requests when the user refreshes the page or navigates to the App

Disclaimer: I'm not using Nuxt in SSR (this might affect your answer).

What is annoying is that I can actually load from localStorage and initialize my state but then it gets overwritten. I'll show you what I mean with this small code example:

buildInitialState () {
   if (!process.server) {
      // Query the localStorage and return accessToken, refreshToken and account details
      return {accessToken: <valid-string>, refreshToken: <valid-string>, account: <valid-json-blob>}
   } else {
      // Return "empty map", we use the string "INVALID" for demonstration purposes.
     return {accessToken: "INVALID", refreshToken: "INVALID", account: "INVALID"}
  }
}

export const state = () => buildInitialState()

If I put a breakpoint on buildInitialState I can see that I correctly initialize the state with the value of localStorage, i.e. I get the accessToken and refreshToken, etc.. back.

All seems well.

But then .....in another part of the program I'm using Axois to send requests, and I use an axios interceptor to decorate the request with the accessToken. To do this I have to stick it into a plugin to get access to the store.

Something like so:

export default ({ app, store }) => {
  axios.interceptors.request.use((config) => {
    const accessToken = _.get(store.state, ['account', 'accessToken'])
    if (accessToken) {
      config.headers.common['x-auth-token'] = accessToken
    }
    return config
  }, (error) => Promise.reject(error))
}

Here the store is closed over in the arrow function supplied to axios so when I go to send the request it sees if there is a valid accessToken, and if so then use it.

BUT, and here's the kicker, when a request is made, I look at the store.state.account.accessToken and low and behold its been reinitialized back to the value of "INVALID".

What? Que?

It's almost like the store was reinitialized behind the scenes? Or somehow the state in the plugin is "server side state"?? because if I try and log buildInitialState I don't get any messages indicating that the path that produced a map with INVALID is being run.

Basically, I don't thoroughly understand the initialization pathway Nuxt is taking here at all.

If any Nuxt masters could help me out understand this a bit more that would be great, it's turning into a bit of a show stopper for me.

Essentially! All I want to be able to do is save the user so that when they refresh their page we can keep on running without forcing them to re-login again....I thought that would be simple.

Thanks and regards, Jason.