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

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

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

一、背景

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

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

二、具體使用方法以及遇到的問(wèn)題

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

使用nuxt的nuxtServerInit在在服務(wù)端的cookie里獲取用戶信息，但是user在存儲(chǔ)時(shí)使用js-cookie,客戶端已對(duì)數(shù)據(jù)進(jìn)行編碼且可能包含中文，在使用JSON.parse進(jìn)行string轉(zhuǎn)化為對(duì)象時(shí)報(bào)錯(cuò)，考慮解碼，使用decodeURI，但是服務(wù)端沒(méi)有window對(duì)象，所以此法不行，因?yàn)楸卷?xiàng)目使用koa，不支持中文。

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

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

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時(shí)間戳
        typeKey: 'person'
      })
      commit('setUser', user)
    }
  }
}

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

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

3、使用客戶端從cookie中獲取user，始終無(wú)法對(duì)user進(jìn)行初始化：

vuex數(shù)據(jù)存儲(chǔ)于緩存當(dāng)中，登錄時(shí)執(zhí)行commit 操作，在不刷新頁(yè)面的情況可以獲取用戶信息，但是刷新頁(yè)面，vuex存儲(chǔ)的user信息丟失，在服務(wù)端無(wú)法獲取user情況下，使用客戶端獲取，但是始終無(wú)法獲取到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信息初始化為空，客戶端無(wú)法再次初始化，即便客戶端的cookie中能獲取到用戶信息，也無(wú)法給user賦值。做了一個(gè)測(cè)試對(duì)比，如果項(xiàng)目是vue 單頁(yè)面模式，用以上方面獲取用戶信息沒(méi)有問(wèn)題。

三、解決辦法

1、在mutation里分兩種情況

數(shù)據(jù)為空從cookie取值，數(shù)據(jù)不為空獲取用戶信息重置，刷新頁(yè)面時(shí)在main.js強(qiáng)制調(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、在存儲(chǔ)時(shí)用buffer將user轉(zhuǎn)換為base64編碼

在服務(wù)端再用buffer轉(zhuǎn)換回來(lái)。此法既可以解決轉(zhuǎn)碼問(wèn)題，也可以解決中文問(wè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時(shí)間戳
          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)
    }
  }