欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

淺談Vue SSR 的 Cookies 問(wèn)題

 更新時(shí)間:2017年11月20日 10:56:14   作者:林岑影  
本篇文章主要介紹了淺談Vue SSR 的 Cookies 問(wèn)題,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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

隨著 Vue 的升級(jí), 第一種方案已經(jīng)不再適用, 第二種也有不少的限制, 于是想到第三種方案, 下來(lái)就說(shuō)說(shuō)具體實(shí)現(xiàn)的方法:

第一種方案

第一種方案已經(jīng)不再適用, 這里不再細(xì)說(shuō)

第二種方案

思路: 將 cookies 注入到 ssr 的 context里, 然后在請(qǐng)求 api 時(shí)讀取, 再追加到 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 會(huì)把 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
 },
}

為什么可以這么做?

默認(rèn)情況下,Vue 對(duì)于每次渲染,bundle renderer 將創(chuàng)建一個(gè)新的 V8 上下文并重新執(zhí)行整個(gè) bundle。應(yīng)用程序代碼與服務(wù)器進(jìn)程隔離, 所以每個(gè)訪問(wèn)的用戶上下文都是獨(dú)立的, 不會(huì)互相影響.

但是從Vue@2.3.0開(kāi)始, 在createBundleRenderer方法的選項(xiàng)中, 添加了runInNewContext選項(xiàng), 使用 runInNewContext: false,bundle 代碼將與服務(wù)器進(jìn)程在同一個(gè) global 上下文中運(yùn)行,所以我們不能再將 cookies 放在 global, 因?yàn)檫@會(huì)讓所有用戶共用同一個(gè) cookies.

為什么現(xiàn)在不這么做?

那我們繼續(xù)將runInNewContext設(shè)置成true, 不就好了嗎? 當(dāng)然也是可以的, 但是重新創(chuàng)建上下文并執(zhí)行整個(gè) bundle 還是相當(dāng)昂貴的,特別是當(dāng)應(yīng)用很大的時(shí)候.

以我自己的博客為例, 之前只有渲染 5 個(gè)路由組件, loadtest 的 rps, 有 50 左右, 但是后來(lái)把后臺(tái)的 12 個(gè)路由組件也加到 SSR 后, rps 直接降到了個(gè)位數(shù)...

所以出現(xiàn)了現(xiàn)在的第三種方案

第三種方案

思路: 將 Cookies 作為參數(shù)注入到組件的asyncData方法, 然后用傳參數(shù)的方法把 cookies 傳給 api, 不得不說(shuō)這種方法很麻煩, 但是這是個(gè)人能想到的比較好的方法

步驟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作為參數(shù)傳給 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 做為參數(shù)給 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 做為參數(shù)給 api

import api from '~api'

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

const actions = {
 async ['getArticleList']({commit, state}, config) {
  // vuex 作為臨時(shí)緩存
  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 一定要用函數(shù)返回值來(lái)初始化 state, 不然會(huì)導(dǎo)致所有用戶共用 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作為參數(shù)傳給 api.setCookies 方法, api.setCookies 是什么東西后面會(huì)有

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:

沒(méi)有步驟4了, 直接引入 api 調(diào)用即可

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

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

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

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

綜上, 如果你項(xiàng)目不大, 還是直接用方案 2 吧, 項(xiàng)目有很多頁(yè)面, 并且大部分頁(yè)面是每個(gè)用戶都一樣的, 可以考慮方案 3, 或者你有什么更好的方法, 歡迎討論

Vue SSR 對(duì)需要 SEO, 并且每個(gè)用戶看到的內(nèi)容都是一致的, 配合緩存, 將是一個(gè)非常好的體驗(yàn)...

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 通過(guò)一個(gè)簡(jiǎn)單的例子學(xué)會(huì)vuex與模塊化

    通過(guò)一個(gè)簡(jiǎn)單的例子學(xué)會(huì)vuex與模塊化

    這篇文章主要給大家介紹了關(guān)于如何通過(guò)一個(gè)簡(jiǎn)單的例子學(xué)會(huì)vuex與模塊化的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。
    2017-11-11
  • Vue3 ref構(gòu)建響應(yīng)式變量失效問(wèn)題及解決

    Vue3 ref構(gòu)建響應(yīng)式變量失效問(wèn)題及解決

    這篇文章主要介紹了Vue3 ref構(gòu)建響應(yīng)式變量失效問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-04-04
  • Vue.js 表單校驗(yàn)插件

    Vue.js 表單校驗(yàn)插件

    這篇文章主要介紹了Vue.js 表單校驗(yàn)插件的相關(guān)資料,需要的朋友可以參考下
    2016-08-08
  • vue?如何刪除數(shù)組中的某一條數(shù)據(jù)

    vue?如何刪除數(shù)組中的某一條數(shù)據(jù)

    這篇文章主要介紹了vue?如何刪除數(shù)組中的某一條數(shù)據(jù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • element中的el-upload附件上傳與附件回顯

    element中的el-upload附件上傳與附件回顯

    這篇文章主要介紹了element中的el-upload附件上傳與附件回顯方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vue3錨點(diǎn)定位兩種實(shí)現(xiàn)方式示例

    vue3錨點(diǎn)定位兩種實(shí)現(xiàn)方式示例

    這篇文章主要給大家介紹了關(guān)于vue3錨點(diǎn)定位兩種實(shí)現(xiàn)的相關(guān)資料,說(shuō)到錨點(diǎn)定位,很多人第一時(shí)間會(huì)想到 a標(biāo)簽,但是a標(biāo)簽實(shí)現(xiàn)的錨點(diǎn)定位并不是那么的完美,需要的朋友可以參考下
    2023-07-07
  • Vue跑馬燈marquee組件使用方法詳解

    Vue跑馬燈marquee組件使用方法詳解

    這篇文章主要為大家詳細(xì)介紹了Vue跑馬燈marquee組件的使用方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-05-05
  • vue中Vue.set()的使用以及對(duì)其進(jìn)行深入解析

    vue中Vue.set()的使用以及對(duì)其進(jìn)行深入解析

    vue不允許在已經(jīng)創(chuàng)建的實(shí)例上動(dòng)態(tài)添加新的根級(jí)響應(yīng)式屬性,不過(guò)可以使用Vue.set()方法將響應(yīng)式屬性添加到嵌套的對(duì)象上,下面這篇文章主要給大家介紹了關(guān)于vue中Vue.set()的使用以及對(duì)其進(jìn)行深入解析的相關(guān)資料,需要的朋友可以參考下
    2023-01-01
  • vue移動(dòng)端實(shí)現(xiàn)左滑編輯與刪除的全過(guò)程

    vue移動(dòng)端實(shí)現(xiàn)左滑編輯與刪除的全過(guò)程

    vue.js是現(xiàn)在流行的js框架之一,vue 是一套用于構(gòu)建用戶界面的漸進(jìn)式j(luò)avascript框架,這篇文章主要給大家介紹了關(guān)于vue移動(dòng)端實(shí)現(xiàn)左滑編輯與刪除的相關(guān)資料,需要的朋友可以參考下
    2021-05-05
  • vue元素實(shí)現(xiàn)動(dòng)畫過(guò)渡效果

    vue元素實(shí)現(xiàn)動(dòng)畫過(guò)渡效果

    這篇文章主要介紹了vue元素實(shí)現(xiàn)動(dòng)畫過(guò)渡效果,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2017-07-07

最新評(píng)論