Vuex-persistedstate: Can't remove the cookies with js-cookie as storage engine

[araujoyuri]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
When I delete the session with Cookies.remove or even localStorage.removeItem the state is preserved, and that can be seen when the page is realoaded

If the current behavior is a bug, please provide the steps to reproduce.

I've configured my store like it's written on the documentation for js-cookie:

export default new Vuex.Store({
  modules: {
    user
  },
  plugins: [
    createPersistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, {expires: 7, secure: true}),
        removeItem: key => Cookies.remove(key)
      }
    })
  ],
  strict: debug
})

At the logout action, I trigger a service to remove the persisted data:

removeToken () {
    const auth2 = window.gapi.auth2.getAuthInstance()

    if (auth2) {
      return Promise.resolve(auth2.signOut())
        .then(response => {
          Cookies.remove('token')
          return response
        })
        .catch(error => Promise.reject(error))
    }
    return Promise.resolve(Cookies.remove('token'))
  }

And this is the service to set the cookie:

validateToken (token) {
    return axios.post(`${API_URL}/auth/google/`, { access_token: token })
      .then(response => {
        const token = response.data.token
        const user = response.data.user

        Cookies.set('token', token)
        axios.defaults.headers.common['Authorization'] = token

        return Promise.resolve({token, user})
      })
      .catch(error => {
        axios.defaults.headers.common['Authorization'] = null
        Cookies.remove('token')
        return Promise.reject(error)
      })
  }

And I check the cookie as an state:

const state = {
  loading: false,
  status: '',
  activeUser: {},
  token: Cookies.get('token') || null,
  error: null
}

What is the expected behavior?
I expect the token to be removed when the logout action is triggered.

[asrori7]

same issue -_

[macarthuror]

@araujoyuri If you want to store only the token I recommend you to add paths to createPersistedState.
With that you are able to change (or delete) the content of the token just with a mutation, the change will automatically update the cookie.

plugins: [
    createPersistedState({
      paths: ['token'],          // To store only this part of the State
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, {expires: 7}),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]

And if you want to delete the cookie is better to manage only the content you want to delete after.--In my opinion--
If you don't add paths you are storing all the vuex state.

Hope that can help you 😁👌

[araujoyuri]

Thanks for the tip @macarthuror. Do you have any link explaining better how to setup that flow? I mean, the management of the state, in my case, the token. I couldn't find it at the documentation for js-cookies.

[macarthuror]

You need to look into vuex because vuex-persistedstate is already managing all the cookies, so you don't need to worry about that.

I made an example of what I mean. Hope that can help. 🤞😁

[araujoyuri]

@macarthuror Thanks a lot! I've configured my VueX to use js-cookies to delete the token, thought I was doing it wrong. Thank you a lot! :smile:

Update:
Actually I don't delete the token, I set it to null.

[robinvdvleuten]

@macarthuror thanks for your help on this one!