最后說說Vue2 SSR 的 Cookies 問題

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
 })
 }
 }
}

// 前后代碼略
 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)
 if (!isProd) {
 console.log(`whole request: ${Date.now() - s}ms`)
 }
 })
// 前后代碼略

import { createApp } from './app'
import { api } from '~api'
export default function(context) {
 return new Promise((resolve, reject) => {
 const s = Date.now()
 const { app, router, store } = createApp()
 const url = context.url
 const fullPath = router.resolve(url).route.fullPath
 if (fullPath !== url) {
 reject({ url: fullPath })
 }
 router.push(url)
 router.onReady(() => {
 const matchedComponents = router.getMatchedComponents()
 if (!matchedComponents.length) {
 reject({ code: 404 })
 }
 // 注意這里, 在步驟2中, context里已經帶有cookies了
 // 創(chuàng)建一個新的api實例, 并把cookies傳進去
 // 同時注入store和根狀態(tài)中
 // 注入 store 中, 可以方便在組件中用
 // 注入 根狀態(tài)中, 可以方便在 vuex 的 actions 中用
 store.$api = store.state.$api = api(context.cookies)
 Promise.all(
 matchedComponents.map(
 ({ asyncData }) =>
 asyncData &&
 asyncData({
 store,
 route: router.currentRoute,
 cookies: context.cookies,
 isServer: true,
 isClient: false
 })
 )
 )
 .then(() => {
 console.log(`data pre-fetch: ${Date.now() - s}ms`)
 context.state = store.state
 context.isProd = process.env.NODE_ENV === 'production'
 resolve(app)
 })
 .catch(reject)
 }, reject)
 })
}

import api from '~api'
// 前后代碼略
const { app, router, store } = createApp()

if (window.__INITIAL_STATE__) {
 store.replaceState(window.__INITIAL_STATE__)
 // 客戶端就沒必要用工廠函數了, 用也可以, 但是需注意, api里的屬性必須和服務端的保持一致
 store.$api = store.state.$api = api
}
// 前后代碼略

const actions = {
 async ['getArticleList'](
 {
 commit,
 state,
 rootState: { $api } // 這里就是前面注入的api
 },
 config
 ) {
 const {
 data: { data, code }
 } = await $api.get('frontend/article/list', { ...config, cache: true })
 if (data && code === 200) {
 commit('receiveArticleList', {
 ...config,
 ...data
 })
 }
 }
}

methods: {
 async recover(id) {
 const {
 data: { code, message }
 } = await this.$store.$api.get('frontend/comment/recover', { id })
 if (code === 200) {
 this.$store.commit('global/comment/recoverComment', id)
 }
 }
}