本来想前面写点什么的, 还是算了, 直接说思路吧.

从 Vue2.3 版本后, SSR 的 cookies, 就变成一个无比麻烦的问题, 具体请访问官网文档: https://ssr.vuejs.org/zh/api.html#runinnewcontext

之前也说不少的思路, 可是都觉得不怎么好用, 虽然都能解决问题, 今天再说一种思路

因为 Vue2.3 以后, bundle 代码将与服务器进程在同一个 global 上下文中运行, 所以不能再将 cookies 丢到 global 给 api 使用, 否则就会出现 cookies 污染

Vue2.3 以后, 我们需要为每个请求创建一个新的根 Vue 实例, 同样的, router、store 也需要, 所以, 我们的思路也在此, 将封装后的 api 注入到这 3 个实例当中去, 保证每个请求的 api 都是独立, 那么就剩一个问题, 注入到哪个实例里面去!?

api 请求用到最多的两个地方就是: 组件和 vuex 的 actions 里, 这两个地方都有 store 的影子, 所以, 注入到 store 中, 毫无疑问是最好的

那么下面就来操作下:

1. 修改 api, 让 api 文件导出一个工厂函数

import axios from 'axios'import qs from 'qs'import md5 from 'md5'import config from './config-server'const parseCookie = cookies => { let cookie = '' Object.keys(cookies).forEach(item => { cookie += item + '=' + cookies[item] + '; ' }) return cookie}export const api = cookies => { return { api: axios.create({ baseURL: config.api, headers: { 'X-Requested-With': 'XMLHttpRequest', cookie: parseCookie(cookies) }, timeout: config.timeout }), post(url, data) { return this.api({ method: 'post', url, data: qs.stringify(data), headers: { 'Content-Type': 'application/x-/lincenying/mmf-blog-vue2-pwa-ssr

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。