一個網(wǎng)站一旦涉及到多用戶, 就很難從 Cookies 中逃脫, Vue SSR 的 cookies 也真算是遇到的一個不小的問題, 從開始玩 SSR 開始到現(xiàn)在, 一共想出了3種方案, 從最早的把 Cookies 注入到 state 中, 到把 Cookies 注入到 global, 到現(xiàn)在的將 Cookies 注入到組件的 asyncData 方法.
隨著 Vue 的升級, 第一種方案已經(jīng)不再適用, 第二種也有不少的限制, 于是想到第三種方案, 下來就說說具體實現(xiàn)的方法:
第一種方案
第一種方案已經(jīng)不再適用, 這里不再細(xì)說
第二種方案
思路: 將 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 },}為什么可以這么做?
默認(rèn)情況下，Vue 對于每次渲染，bundle renderer 將創(chuàng)建一個新的 V8 上下文并重新執(zhí)行整個 bundle。應(yīng)用程序代碼與服務(wù)器進(jìn)程隔離, 所以每個訪問的用戶上下文都是獨立的, 不會互相影響.
但是從Vue@2.3.0開始, 在createBundleRenderer方法的選項中, 添加了runInNewContext選項, 使用 runInNewContext: false，bundle 代碼將與服務(wù)器進(jìn)程在同一個 global 上下文中運行，所以我們不能再將 cookies 放在 global, 因為這會讓所有用戶共用同一個 cookies.
為什么現(xiàn)在不這么做?
那我們繼續(xù)將runInNewContext設(shè)置成true, 不就好了嗎? 當(dāng)然也是可以的, 但是重新創(chuàng)建上下文并執(zhí)行整個 bundle 還是相當(dāng)昂貴的，特別是當(dāng)應(yīng)用很大的時候.
以我自己的博客為例, 之前只有渲染 5 個路由組件, loadtest 的 rps, 有 50 左右, 但是后來把后臺的 12 個路由組件也加到 SSR 后, rps 直接降到了個位數(shù)...
所以出現(xiàn)了現(xiàn)在的第三種方案
第三種方案
思路: 將 Cookies 作為參數(shù)注入到組件的asyncData方法, 然后用傳參數(shù)的方法把 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作為參數(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 作為臨時緩存 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, 不然會導(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 是什么東西后面會有
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 具體實例: 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, 并且每個用戶看到的內(nèi)容都是一致的, 配合緩存, 將是一個非常好的體驗...
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
