vuex-persistedstate icon indicating copy to clipboard operation
vuex-persistedstate copied to clipboard

Storage option with Js cookie stops working suddenly

Open zahidhasanemon opened this issue 3 years ago • 1 comments

I was working with vuex-persistedstate version 4.0.0 (tried 4.1.0 as well) and used js cookie as the storage option. my auth credentials were stored in the vuex cookie. but since yesterday, store value is not updating with login. what went wrong suddenly? vuex-persistedstate: 4.0.0 js-cookie: 3.0.1

store index

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import Cookies from 'js-cookie'

// Modules
import app from './app'
import auth from './auth'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    app,
    auth,
  },
  plugins: [
    createPersistedState({
      paths: ['auth'],
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: parseInt(process.env.VUE_APP_MAX_TOKEN_CACHE_TIME), secure: false }),
        removeItem: key => Cookies.remove(key),
      },
    }),
  ],
  strict: process.env.DEV,
})

auth module

import axios from '@axios'

export default {
  namespaced: true,
  state: {
    status: '',
    token: '',
    userData: {},
  },
  mutations: {
    auth_request(state) {
      state.status = 'loading'
    },
    auth_success(state, { accessToken, userData }) {
      state.status = 'success'
      state.token = accessToken
      state.userData = userData
    },
    auth_error(state) {
      state.status = 'error'
      state.token = ''
      state.userData = {}
    },
    update_image(state, { userImage }) {
      state.userData = { ...state.userData, image: userImage }
    },
    logout(state) {
      state.status = ''
      state.token = ''
      state.userData = {}
    },
  },
  actions: {
    login({ commit }, user) {
      return new Promise((resolve, reject) => {
        commit('auth_request')
        axios
          .post('login', user, { withCredentials: true })
          .then(response => {
            // eslint-disable-next-line prefer-destructuring
            const { accessToken, userData } = response.data
            commit('auth_success', { accessToken, userData })
            resolve(response)
          })
          .catch(err => {
            commit('auth_error')
            reject(err)
          })
      })
    },
  },
  getters: {
    isLoggedIn: state => !!state.token,
    authStatus: state => state.status,
  },
}

in login actions commit('auth_request') works well. it sets state status to loading. but in axios request commit('auth_success', { accessToken, userData }) not setting value in state. i can get values using console log in auth_success mutation and see them in vue dev tools as well but in browser cookie, value does not update. if i don't use cookie as storage, all things works well. all data in mutations are set in local storage. cookie auth request mutation auth success mutation

zahidhasanemon avatar Oct 12 '21 08:10 zahidhasanemon

I am having the same issue using vuex-persistedstate v.4.1.0 and js-cookie v.3.0.1. Values are updated in the dev tools, but the cookie value does not update.

shweinfeld avatar Jan 12 '22 14:01 shweinfeld