Skip to content
This repository has been archived by the owner on Feb 4, 2022. It is now read-only.

Storage option with Js cookie stops working suddenly #435

Open
zahidhasanemon opened this issue Oct 12, 2021 · 1 comment
Open

Storage option with Js cookie stops working suddenly #435

zahidhasanemon opened this issue Oct 12, 2021 · 1 comment

Comments

@zahidhasanemon
Copy link

zahidhasanemon commented Oct 12, 2021

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

@shweinfeld
Copy link

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants