nuxt使用vuex存儲及獲取用戶信息踩坑的解決

更新時間：2022年04月29日 11:29:17 作者：意井

這篇文章主要介紹了nuxt使用vuex存儲及獲取用戶信息踩坑的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

一、背景

按公司要求做一個電商網(wǎng)站，考慮到seo，所以用的是nuxt進行開發(fā)。

登錄之后記錄用戶信息（user）使用cookie+vuex模式。

二、具體使用方法以及遇到的問題

1、無法解碼導(dǎo)致無法轉(zhuǎn)化為對象且不支持中文：

使用nuxt的nuxtServerInit在在服務(wù)端的cookie里獲取用戶信息，但是user在存儲時使用js-cookie,客戶端已對數(shù)據(jù)進行編碼且可能包含中文，在使用JSON.parse進行string轉(zhuǎn)化為對象時報錯，考慮解碼，使用decodeURI，但是服務(wù)端沒有window對象，所以此法不行，因為本項目使用koa，不支持中文。

2、token失效，頁面進入死循環(huán)，無法完成渲染：

使用nuxt的nuxtServerInit在在服務(wù)端的cookie里獲取存儲的token,token可以正常獲取，因為token是字符串且不包含中文，再根據(jù)token的值是否為空判斷用戶是否登錄，再決定是否發(fā)送請求獲取用戶信息。

export const actions = {
  nuxtServerInit({ commit }, { req, app }) {
    let token = null
    let username = null
    if (req.headers.cookie) {
      const cookies = utils.getcookiesInServer(req)
      token = cookies.token ? cookies.token : ''
      username = cookies.username ? cookies.username : ''
    }
    commit('setToken', token)
    commit('setUsername', username)
    if (token) {
      const timestamp = Date.parse(new Date()) / 1000
      const { data: user } = await app.$axios.post('api/MemberApi/QueryCInfo', {
        sid: 6100,
        timestamp, // （必填）UNIX時間戳
        typeKey: 'person'
      })
      commit('setUser', user)
    }
  }
}

出現(xiàn)問題：若是token 失效，會進入401死循環(huán)，頁面無法正常顯示。

原因：本項目的401是默認使用http的401錯誤碼，而不是與后端自定義的未登錄錯誤碼，http無法請求成功，那么服務(wù)端永遠無法完成渲染，導(dǎo)致客戶端無法正常顯示，已用另一個同一框架項目測試。

3、使用客戶端從cookie中獲取user，始終無法對user進行初始化：

vuex數(shù)據(jù)存儲于緩存當(dāng)中，登錄時執(zhí)行commit 操作，在不刷新頁面的情況可以獲取用戶信息，但是刷新頁面，vuex存儲的user信息丟失，在服務(wù)端無法獲取user情況下，使用客戶端獲取，但是始終無法獲取到user信息。下圖為客戶端獲取user信息方法：

import utils from '@/utils/getCookie'
const Cookie = process.client ? require('js-cookie') : undefined
export const state = () => ({
  user: utils.getcookiesInClient('user'),
  token: '',
  username: ''
})

原因：nuxt是服務(wù)端和客戶端渲染集成，所以服務(wù)端將user信息初始化為空，客戶端無法再次初始化，即便客戶端的cookie中能獲取到用戶信息，也無法給user賦值。做了一個測試對比，如果項目是vue 單頁面模式，用以上方面獲取用戶信息沒有問題。

三、解決辦法

1、在mutation里分兩種情況

數(shù)據(jù)為空從cookie取值，數(shù)據(jù)不為空獲取用戶信息重置，刷新頁面時在main.js強制調(diào)用mutation commit獲取用戶信息。

store/index.js

export const mutations = {
  setUser(state, user) {
    if (!user) {
      state.user = utils.getcookiesInClient('user')
    } else {
      state.user = user
    }
  }
}

main.js

export default function(app) {
  if (process.client) {
    app.store.commit('setUser')
  }
}

2、在存儲時用buffer將user轉(zhuǎn)換為base64編碼

在服務(wù)端再用buffer轉(zhuǎn)換回來。此法既可以解決轉(zhuǎn)碼問題，也可以解決中文問題。但是此法不適用于ie9及以下瀏覽器。

存：

getUser({ commit }) {
    return new Promise((resolve, reject) => {
      const timestamp = Date.parse(new Date()) / 1000
      this.$axios
        .post('api/MemberApi/QueryCInfo', {
          sid: 6100,
          timestamp, // （必填）UNIX時間戳
          typeKey: 'person'
        })
        .then((res) => {
          commit('setUser', res.data)
          Cookie.set('user', res.data, { expires: 7 })
          Cookie.set('user', Buffer.from(JSON.stringify(res.data)).toString('base64'), { expires: 7 })
          resolve(res)
        })
        .catch((error) => {
          reject(error)
        })
    })
  }

轉(zhuǎn)：

 nuxtServerInit({ commit }, { req, app }) {
    let token = null
    let username = null
    let user = null
    if (req.headers.cookie) {
      const cookies = utils.getcookiesInServer(req)
      token = cookies.token ? cookies.token : ''
      username = cookies.username ? cookies.username : ''
      user = JSON.parse(Buffer.from(cookies.user, 'base64').toString())
      commit('setUser', user)
      commit('setToken', token)
      commit('setUsername', username)
    }
  }