一个网站一旦涉及到多用户, 就很难从 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 }, }
为什么可以这么做"htmlcode">
步骤2: 在entry-server.js里, 将cookies作为参数传给 asyncData 方法 步骤3: 在组件里, 把 cookies 做为参数给 Vuex 的 actions 步骤4: 在 Vuex 里将 cookies 做为参数给 api 这里一定要注意, state 一定要用函数返回值来初始化 state, 不然会导致所有用户共用 state 步骤5: 在 api 里接收 cookies, 并加到 axios 的 headers 里 第四种方案 步骤1: 还是在 server.js 里, 把 cookies 注入到 context 中 步骤2: 在entry-server.js里, 将cookies作为参数传给 api.setCookies 方法, api.setCookies 是什么东西后面会有 步骤3: 重写 api.js 步骤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, 并且每个用户看到的内容都是一致的, 配合缓存, 将是一个非常好的体验... 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
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
}
})
},
}
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)
})
api.setCookies(context.cookies) // 这一句
Promise.all(matchedComponents.map(({asyncData}) => asyncData && asyncData({
store,
route: router.currentRoute,
cookies: context.cookies,
isServer: true,
isClient: false
}))).then(() => {
// ...
}
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
})
}
}
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
- 三国志8重制版恶名怎么消除 恶名影响与消除方法介绍
- 模拟之声慢刻CD《柏林之声5》2019[原抓WAV+CUE]
- AlexandraSoumm-Parisestunefte(2024)[24Bit-96kHz]FLAC
- 李嘉《国语转调1》[天王唱片][WAV整轨]
- 不是哥们 这都能跑?网友展示用720显卡跑《黑神话》
- 玩家自制《黑神话:悟空》亢金星君3D动画 现代妆容绝美
- 大佬的审美冲击!《GTA6》环境设计师展示最新作品
- 纪晓君.2001-野火·春风【魔岩】【WAV+CUE】
- 汪峰.2005-怒放的生命【创盟音乐】【WAV+CUE】
- 群星.1995-坠入情网【宝丽金】【WAV+CUE】
- 群星《谁杀死了Hi-Fi音乐》涂鸦精品 [WAV+CUE][1G]
- 群星1998《宝丽金最精彩98》香港首版[WAV+CUE][1G]
- 汪峰《也许我可以无视死亡》星文[WAV+CUE][1G]
- 李嘉-1991《国语转调2》[天王唱片][WAV整轨]
- 蔡琴2008《金声回忆录101》6CD[环星唱片][WAV整轨]