浅谈Vue SSR 的 Cookies 问题(3)
第四种方案
步骤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, 并且每个用户看到的内容都是一致的, 配合缓存, 将是一个非常好的体验...
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持黑区网络。
