分析關於Vue SSR 的 Cookies 問題

本篇文章主要介紹了淺談Vue SSR 的 Cookies 問題，內容蠻不錯的，現在分享給大家，也給大家做個參考。

一個網站一旦涉及到多用戶, 就很難從Cookies 中逃脫, Vue SSR 的cookies 也真算是遇到的一個不小的問題, 從開始玩SSR 開始到現在, 一共想出了3種方案, 從最早的把Cookies 注入到state 中, 到把Cookies 注入到global, 到現在的將Cookies 注入到組件的asyncData 方法.

#隨著Vue 的升級, 第一種方案已經不再適用, 第二種也有不少的限制, 於是想到第三種方案, 下來就說說具體實現的方法:

##第一種方案

#第一種方案已經不再適用, 這裡不再細說

第二種方案

想法: 將cookies 注入到ssr的context裡, 然後在請求api 時讀取, 再追加到axios 的header 裡

#1, 首先在server.js 裡將cookies 加到context裡

#

const context = {
 title: 'M.M.F 小屋',
 description: 'M.M.F 小屋',
 url: req.url,
 cookies: req.cookies
}
renderer.renderToString(context, (err, html) => {
 if (err) {
  return errorHandler(err)
 }
 res.end(html)
})

之後, Vue 會把context 加到global.__VUE_SSR_CONTEXT__

2, 在api.js 裡讀取cookies

#

import axios from 'axios'
import qs from 'qs'
import md5 from 'md5'
import config from './config-server'

const SSR = global.__VUE_SSR_CONTEXT__
const cookies = SSR.cookies || {}
const parseCookie = cookies => {
 let cookie = ''
 Object.keys(cookies).forEach(item => {
  cookie+= item + '=' + cookies[item] + '; '
 })
 return cookie
}

export default {
 async post(url, data) {
  const cookie = parseCookie(cookies)
  const res = await axios({
   method: 'post',
   url: config.api + url,
   data: qs.stringify(data),
   timeout: config.timeout,
   headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
    cookie
   }
  })
  return res
 },
}

為什麼可以這麼做?

預設情況下，Vue 對於每次渲染，bundle renderer 會建立一個新的V8 上下文並重新執行整個bundle。應用程式程式碼與伺服器進程隔離, 所以每個存取的使用者上下文都是獨立的, 不會互相影響.

但是從Vue@2.3.0開始, 在createBundleRenderer方法的選項中, 新增了runInNewContext選項, 使用runInNewContext: false，bundle 程式碼將與伺服器程序在同一個global 上下文中運行，所以我們不能再將cookies 放在global, 因為這會讓所有使用者共用同一個cookies.

#為什麼現在不這麼做?

那我們繼續將runInNewContext設定成true, 不就好了嗎? 當然也是可以的, 但是重新創建上下文並執行整個bundle 還是相當昂貴的，特別是當應用很大的時候.

以我自己的博客為例, 之前只有渲染5 個路由組件, loadtest 的rps, 有50 左右, 但是後來把後台的12 個路由組件也加到SSR 後, rps 直接降到了個位數...

所以出現了現在的第三種方案

第三種方案

#思路: 將Cookies 作為參數注入到組件的asyncData方法, 然後用傳參數的方法把cookies 傳給api, 不得不說這種方法很麻煩, 但是這是個人能想到的比較好的方法

步驟1:

還是在server.js 裡, 把cookies 注入到context 中

const context = {
 title: 'M.M.F 小屋',
 url: req.url,
 cookies: req.cookies,
}
renderer.renderToString(context, (err, html) => {
 if (err) {
  return handleError(err)
 }
 res.end(html)
})

步驟2 :

在entry-server.js裡, 將cookies當作參數傳給asyncData 方法

Promise.all(matchedComponents.map(({asyncData}) => asyncData && asyncData({
 store,
 route: router.currentRoute,
 cookies: context.cookies,
 isServer: true,
 isClient: false
}))).then(() => {
 context.state = store.state
 context.isProd = process.env.NODE_ENV === 'production'
 resolve(app)
}).catch(reject)

步驟3:

在元件裡, 把cookies 做成參數給Vuex 的actions

export default {
 name: 'frontend-index',
 async asyncData({store, route, cookies}, config = { page: 1}) {
  config.cookies = cookies
  await store.dispatch('frontend/article/getArticleList', config)
 }
 // .....
}

步驟4:

在Vuex 裡將cookies 做為參數給api

import api from '~api'

const state = () => ({
 lists: {
  data: [],
  hasNext: 0,
  page: 1,
  path: ''
 },
})

const actions = {
 async ['getArticleList']({commit, state}, config) {
  // vuex 作为临时缓存
  if (state.lists.data.length > 0 && config.path === state.lists.path && config.page === 1) {
   return
  }
  let cookies
  if (config.cookies) {
   cookies = config.cookies
   delete config.cookies
  }
  const { data: { data, code} } = await api.get('frontend/article/list', {...config, cache: true}, cookies)
  if (data && code === 200) {
   commit('receiveArticleList', {
    ...config,
    ...data,
   })
  }
 },
}

const mutations = {
 ['receiveArticleList'](state, {list, hasNext, hasPrev, page, path}) {
  if (page === 1) {
   list = [].concat(list)
  } else {
   list = state.lists.data.concat(list)
  }
  state.lists = {
   data: list, hasNext, hasPrev, page, path
  }
 },
}

const getters = {

}

export default {
 namespaced: true,
 state,
 actions,
 mutations,
 getters
}

這裡一定要注意, state 一定要用函數回傳值來初始化state, 不然會導致所有使用者共用state

步驟5:

在api 裡接收cookies, 並加到axios 的headers 裡

##

import axios from 'axios'
import qs from 'qs'
import config from './config-server'

const parseCookie = cookies => {
 let cookie = ''
 Object.keys(cookies).forEach(item => {
  cookie+= item + '=' + cookies[item] + '; '
 })
 return cookie
}

export default {
 get(url, data, cookies = {}) {
  const cookie = parseCookie(cookies)
  return axios({
   method: 'get',
   url: config.api + url,
   data: qs.stringify(data),
   timeout: config.timeout,
   headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
    cookie
   }
  })
 },
}

##第四種方案

步驟1:

還是在server.js 裡, 把cookies 注入到context 中

const context = {
  title: 'M.M.F 小屋',
  url: req.url,
  cookies: req.cookies,
}
renderer.renderToString(context, (err, html) => {
  if (err) {
    return handleError(err)
  }
  res.end(html)
})

## 步驟2 :

在entry-server.js裡, 將cookies當作參數傳給api.setCookies 方法, api.setCookies 是什麼東西後面會有

api.setCookies(context.cookies) // 这一句
Promise.all(matchedComponents.map(({asyncData}) => asyncData && asyncData({
 store,
 route: router.currentRoute,
 cookies: context.cookies,
 isServer: true,
 isClient: false
}))).then(() => {
 // ...
}

步驟3:

重寫api.js

import axios from 'axios'
import qs from 'qs'
import config from './config-server'

const parseCookie = cookies => {
  let cookie = ''
  Object.keys(cookies).forEach(item => {
    cookie+= item + '=' + cookies[item] + '; '
  })
  return cookie
}

export default {
  api: null,
  cookies: {},
  setCookies(value) {
    value = value || {}
    this.cookies = value
    this.api = axios.create({
      baseURL: config.api,
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        cookie: parseCookie(value)
      },
      timeout: config.timeout,
    })
  },
  post(url, data) {
    if (!this.api) this.setCookies()
    return this.api({
      method: 'post',
      url,
      data: qs.stringify(data),
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
      }
    }).then(res => {
      return res
    })
  },
  get(url, params) {
    if (!this.api) this.setCookies()
    return this.api({
      method: 'get',
      url,
      params,
    }).then(res => {
      return res
    })
  }
}

步驟4:

沒有步驟4了, 直接引入api 呼叫即可

如果你沒有將axios 重新封裝, 那麼也可以把第五步省略, 直接在第四部把cookies 給axios 即可

方案2 具體實例: https://github.com/lincenying/mmf-blog-vue2-ssr

方案3 具體實例: https://github.com/lincenying/mmf-blog-vue2-pwa-ssr

方案4 具體實例: https://github.com/lincenying/mmf-blog-vue2-pwa-ssr

綜上, 如果你專案不大, 還是直接用方案2 吧, 項目有很多頁面, 並且大部分頁面是每個用戶都一樣的, 可以考慮方案3, 或者你有什麼更好的方法, 歡迎討論

Vue SSR 對需要SEO, 並且每個用戶看到的內容都是一致的, 配合快取, 將是一個非常好的體驗...

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

關於Vue2 SSR快取Api 資料的方法

vue2.0專案實作路由跳轉的方法介紹

以上是分析關於Vue SSR 的 Cookies 問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！