本篇文章主要介紹了淺談Vue SSR 的 Cookies 問題，內容蠻不錯的，現在分享給大家，也給大家做個參考。
一個網站一旦涉及到多用戶, 就很難從Cookies 中逃脫, Vue SSR 的cookies 也真算是遇到的一個不小的問題, 從開始玩SSR 開始到現在, 一共想出了3種方案, 從最早的把Cookies 注入到state 中, 到把Cookies 注入到global, 到現在的將Cookies 注入到組件的asyncData 方法.
#隨著Vue 的升級, 第一種方案已經不再適用, 第二種也有不少的限制, 於是想到第三種方案, 下來就說說具體實現的方法:
##第一種方案
第二種方案
#
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)
})#
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
},
}為什麼可以這麼做?
#為什麼現在不這麼做?
第三種方案
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)
})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)export default {
name: 'frontend-index',
async asyncData({store, route, cookies}, config = { page: 1}) {
config.cookies = cookies
await store.dispatch('frontend/article/getArticleList', config)
}
// .....
}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
}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中文網！
相關推薦：
以上是分析關於Vue SSR 的 Cookies 問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！
