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

這篇文章主要講解了“nuxt使用vuex存儲(chǔ)及獲取用戶信息的坑怎么解決”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“nuxt使用vuex存儲(chǔ)及獲取用戶信息的坑怎么解決”吧！

一、背景

按公司要求做一個(gè)電商網(wǎng)站，考慮到seo，所以用的是nuxt進(jìn)行開發(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)
    }
  }

感謝各位的閱讀，以上就是“nuxt使用vuex存儲(chǔ)及獲取用戶信息的坑怎么解決”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)nuxt使用vuex存儲(chǔ)及獲取用戶信息的坑怎么解決這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！