vuex-persistedstate導致用戶信息無法清除

問題

網(wǎng)站使用nuxt框架，使用js-cookie+vuex存儲用戶信息，在這一篇文章中關(guān)于nuxt使用vuex存儲以及獲取用戶信息踩坑，我講過nuxt是服務(wù)端和客戶端渲染集成，所以服務(wù)端將user信息初始化為空，客戶端無法再次初始化，即便客戶端的cookie中能獲取到用戶信息，也無法給user賦值。

后來在網(wǎng)上搜索了半天解決辦法，引入了vuex-persistedstate,但是引入之后并未使用,且并未及時刪除，仍然使用cookie在客戶端獲取user信息，清除cookie中user信息，發(fā)現(xiàn)user信息仍然存在，經(jīng)排查發(fā)現(xiàn)localStorage存儲了一份user信息，逐步排查發(fā)現(xiàn)是因為調(diào)用了vuex-persistedstate將user信息和token存儲在localStrorage,但是在退出登錄時只清除了vuex中token，并未清除user信息，所以導致問題的出現(xiàn)。

解決辦法

刪除vuex-persistedstate或者在退出登錄時清除vuex中user信息。

延伸

1、基于以上問題，研究了一下vuex-persistedstate，發(fā)現(xiàn)三點：存儲位置：默認localStorage（永久存儲本地，只能手動刪除）,可修改為sessionStorage（關(guān)閉瀏覽器即無）；存儲對象鍵：默認為vuex,可任意修改，存儲對象：store。

nuxt中使用vuex-persistedstate,通過在nuxt.config.js中全局引入

localStorage.js

import createPersistedState from 'vuex-persistedstate'
?
export default ({ store }) => {
? window.onNuxtReady(() => {
? ? createPersistedState({ key: 'paida-vuex', storage: window.sessionStorage })(store)
? })
}

nuxt.config.js

?plugins: [
? ? {
? ? ? src: '~/plugins/localStorage',
? ? ? ssr: false
? ? }
? ]

2、cookie禁用問題：因為網(wǎng)站是在用戶信息和token存儲在cookie中，禁用之后登錄相關(guān)操作無法進行。谷歌、火狐禁用cookie,導致localStorage,sessionStorage無法正常使用。

另外,做了一個突發(fā)奇想的測試，在axios的配置文件中直接引入store,獲取token,即便登錄獲取到token，也更新了store,但是因為axios作為外部插件引入，并不屬于vue 組件，所以無法獲取token的最新信息。 

使用vuex-persistedstate插件遇到的問題

這是一個做持久化的插件:vuex-persistedstate

 我在做項目時,遇到一個問題,就是做下面這個功能,渲染數(shù)據(jù)的時候,因為這個數(shù)據(jù)好多個地方使用,所以呢,把它存到了vuex里面。vuex 是將數(shù)據(jù)存到了瀏覽器的內(nèi)存中,刷新就沒了

這行代碼是寫在vuex里面的,就是說,我直接從本地去拿數(shù)據(jù)

list: JSON.parse(window.localStorage.getItem('abc')).category.list || []

直接看下代碼：我一開始是這樣想的,既然我vuex中有數(shù)據(jù)了,不用計算屬性行不行,直接渲染,確實可以渲染,但是品牌這一項咋渲染呢,push行不通啊,那就只能把結(jié)構(gòu)寫死,但是頁面效果就不對了,所以這個地方用計算屬性,第一,動態(tài)的取到前兩項,第二,可以動態(tài)的添加新的 li 結(jié)構(gòu)。

計算屬性使用的場景：有數(shù)據(jù)啦，但不是我想要的格式，要加工加工

 setup () {
    const brand = reactive({
      id: 'brand',
      name: '品牌',
      children: [{ id: 'brand-children', name: '品牌推薦' }]
    })
    const store = useStore()
    const cateList = computed(() => {
      const list = store.state.category.list.map(item => {
        return {
          id: item.id,
          name: item.name,
          children: item.children && item.children.slice(0, 2)
        }
      })
      list.push(brand)
      return list
    })
    return { cateList }
  }

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論