Auth-module: Client side logout does not clear auth details in store

[dfcook]

We are seeing this behaviour:

1. Login using jwt token and cookie
2. Navigate to page that has auth middleware enabled.
3. Logout (checking dev tools and vuex store auth is cleared).
4. Refresh the browser.
5. User details are reinstated in vuex store auth.

This doesn't have to be on the same machine, somebody coming to the secured page on another machine sees the auth details of the original user.

I don't know if this is a bug as it seems quite critical so I'm guessing I may be doing something wrong. My current workaround is to add this code to my store actions:

async nuxtServerInit ({ state, dispatch }, { req }) {
    if (req.headers.cookie) {
      const cookies = cookieparser.parse(req.headers.cookie)
      if (!cookies.auth) {
        await dispatch('logout')
      }
    }
  }

_{This question is available on Nuxt.js community (#c72)}

[syffs]

@dfcook Which version are you using ?

[dfcook]

@Syffs 4.0.0-rc.3

[breakingrobot]

@dfcook Do you have the same problem using the dev branch ?

[javialon26]

@dfcook check your store, this kinds of things happens when state is an object and always is passed by reference, because of this your state is the same instance for all users.

Bad example:
store/index.js

const state = {
  isMenuOpen: false
}

const createStore = () => {
  return new Vuex.Store({
    state
  })
}

Good example:
store/index.js

const createStore = () => {
  return new Vuex.Store({
    state: {
      isMenuOpen: false
    }
  })
}

I hope this will help.

[pi0]

There shouldn't be any general issue with 4.0.1. Please reopen if you are sure this problem still exists.

[dfcook]

The state object was the issue, thanks it is now resolved.

[rason560]

@dfcook check your store, this kinds of things happens when state is an object and always is passed by reference, because of this your state is the same instance for all users.

Bad example:
store/index.js

const state = {
  isMenuOpen: false
}

const createStore = () => {
  return new Vuex.Store({
    state
  })
}

Good example:
store/index.js

const createStore = () => {
  return new Vuex.Store({
    state: {
      isMenuOpen: false
    }
  })
}

I hope this will help.

thank you so mouch . this problem has bothered me whole day.

[Benyaminrmb]

if u are using nuxt auth u can try

this.$auth.strategy.token.reset();