本來(lái)想前面寫(xiě)點(diǎn)什么的, 還是算了, 直接說(shuō)思路吧.

大武口網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,大武口網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為大武口上千多家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站制作要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的大武口做網(wǎng)站的公司定做！

從 Vue2.3 版本后, SSR 的 cookies, 就變成一個(gè)無(wú)比麻煩的問(wèn)題, 具體請(qǐng)?jiān)L問(wèn)官網(wǎng)文檔: https://ssr.vuejs.org/zh/api.html#runinnewcontext

之前也說(shuō)不少的思路, 可是都覺(jué)得不怎么好用, 雖然都能解決問(wèn)題, 今天再說(shuō)一種思路

因?yàn)?Vue2.3 以后, bundle 代碼將與服務(wù)器進(jìn)程在同一個(gè) global 上下文中運(yùn)行, 所以不能再將 cookies 丟到 global 給 api 使用, 否則就會(huì)出現(xiàn) cookies 污染

Vue2.3 以后, 我們需要為每個(gè)請(qǐng)求創(chuàng)建一個(gè)新的根 Vue 實(shí)例, 同樣的, router、store 也需要, 所以, 我們的思路也在此, 將封裝后的 api 注入到這 3 個(gè)實(shí)例當(dāng)中去, 保證每個(gè)請(qǐng)求的 api 都是獨(dú)立, 那么就剩一個(gè)問(wèn)題, 注入到哪個(gè)實(shí)例里面去!?

api 請(qǐng)求用到最多的兩個(gè)地方就是: 組件和 vuex 的 actions 里, 這兩個(gè)地方都有 store 的影子, 所以, 注入到 store 中, 毫無(wú)疑問(wèn)是最好的

那么下面就來(lái)操作下:

1. 修改 api, 讓 api 文件導(dǎo)出一個(gè)工廠函數(shù)

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-www-form-urlencoded; charset=UTF-8'
        }
      })
    },
    async get(url, params) {
      return this.api({
        method: 'get',
        url,
        params
      })
    }
  }
}

文章名稱：最后說(shuō)說(shuō)Vue2SSR的Cookies問(wèn)題-創(chuàng)新互聯(lián)
文章URL：http://weahome.cn/article/dscgsj.html