淺談Vue SSR 的 Cookies 問題
一個(gè)網(wǎng)站一旦涉及到多用戶, 就很難從 Cookies 中逃脫, Vue SSR 的 cookies 也真算是遇到的一個(gè)不小的問題, 從開始玩 SSR 開始到現(xiàn)在, 一共想出了3種方案, 從最早的把 Cookies 注入到 state 中, 到把 Cookies 注入到 global, 到現(xiàn)在的將 Cookies 注入到組件的 asyncData 方法.
隨著 Vue 的升級(jí), 第一種方案已經(jīng)不再適用, 第二種也有不少的限制, 于是想到第三種方案, 下來就說說具體實(shí)現(xiàn)的方法:
第一種方案
第一種方案已經(jīng)不再適用, 這里不再細(xì)說
第二種方案
思路: 將 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è)訪問的用戶上下文都是獨(dú)立的, 不會(huì)互相影響.
但是從Vue@2.3.0開始, 在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 左右, 但是后來把后臺(tái)的 12 個(gè)路由組件也加到 SSR 后, rps 直接降到了個(gè)位數(shù)...
所以出現(xiàn)了現(xiàn)在的第三種方案
第三種方案
思路: 將 Cookies 作為參數(shù)注入到組件的asyncData方法, 然后用傳參數(shù)的方法把 cookies 傳給 api, 不得不說這種方法很麻煩, 但是這是個(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ù)返回值來初始化 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:
沒有步驟4了, 直接引入 api 調(diào)用即可
如果你沒有將 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)目有很多頁面, 并且大部分頁面是每個(gè)用戶都一樣的, 可以考慮方案 3, 或者你有什么更好的方法, 歡迎討論
Vue SSR 對(duì)需要 SEO, 并且每個(gè)用戶看到的內(nèi)容都是一致的, 配合緩存, 將是一個(gè)非常好的體驗(yàn)...
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Vue Element前端應(yīng)用開發(fā)之菜單資源管理
在權(quán)限管理系統(tǒng)中,菜單也屬于權(quán)限控制的一個(gè)資源,屬于角色控制的一環(huán)。不同角色用戶,登錄系統(tǒng)后,出現(xiàn)的系統(tǒng)菜單是不同的。菜單結(jié)合路由集合,實(shí)現(xiàn)可訪問路由的過濾,也就實(shí)現(xiàn)了對(duì)應(yīng)角色菜單的展示和可訪問路由的控制。2021-05-05
element修改form的el-input寬度,el-select寬度的方法實(shí)現(xiàn)
有時(shí)候像form表單這樣,頁面的input、select等寬度不一定會(huì)是一樣的,可能有些長(zhǎng),有些短,本文就介紹了如何element修改form的el-input寬度,el-select寬度的方法實(shí)現(xiàn),感興趣的可以了解一下2022-02-02
vue在響應(yīng)頭response中獲取自定義headers操作
這篇文章主要介紹了vue在響應(yīng)頭response中獲取自定義headers操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-07-07
在 Vue 3 中上傳 KML 文件并在地圖上顯示的實(shí)現(xiàn)方法
KML 文件作為一種標(biāo)準(zhǔn)的地理數(shù)據(jù)格式,廣泛應(yīng)用于地理信息系統(tǒng)(GIS)中,通過 OpenLayers 和 Vue 3 的組合,您可以方便地實(shí)現(xiàn)地圖數(shù)據(jù)的可視化和交互,本文介紹在 Vue 3 中上傳 KML 文件并在地圖上顯示的實(shí)現(xiàn)方法,感興趣的朋友一起看看吧2024-12-12
使用elementUI表單校驗(yàn)函數(shù)validate需要注意的坑及解決
這篇文章主要介紹了使用elementUI表單校驗(yàn)函數(shù)validate需要注意的坑及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
Vue+Element-ui彈窗?this.$alert?is?not?a?function問題
這篇文章主要介紹了Vue+Element-ui彈窗?this.$alert?is?not?a?function問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10

