Vue SSR, 在服務端請求數據時怎麼帶 cookies?

cookies 都是存在瀏覽器端, 而 ssr 時, 是在服務器請求的接口, 默認狀況確定帶不了瀏覽器的 cookies, 然而一些登陸後的頁面數據又必需要 cookies, 這可怎麼辦

1. 經過 express 取得 cookies

在 server.js 上引入 cookies 解析中間件

const cookieParser = require('cookie-parser')

而且在路由前面 use

app.use(cookieParser())

2. 將 cookies 注入 render 的上下文中

app.get('*', (req, res) => {
    // 其餘代碼省略
    const context = {
        url: req.url,
        cookies: req.cookies
    }
    const renderStream = renderer.renderToStream(context)
    // 其餘代碼省略
})

3. 將 cookies 注入 vuex 的 store 中

在server-entry.js文件中, 將 cookies 注入到 store 中

export default context => {
    // 其餘代碼省略
    if (context.cookies) {
        store.state.cookies = context.cookies
    }
    // 其餘代碼省略
}

這樣就能夠在組件中取到 cookies 了.

4. 封裝請求

這裏以 axios 爲例, 將 cookies 加載封裝函數的參數中:
注意: 這裏的封裝, 建議將瀏覽器用的和 node 用的分開

import axios from 'axios'

const parseCookie = cookies => {
    let cookie = ''
    Object.keys(cookies).forEach(item => {
        cookie+= item + '=' + cookies[item] + '; '
    })
    return cookie
}

export default {
    get(url, params, cookies = {}) {
        const cookie = parseCookie(cookies)
        return axios({
            method: 'get',
            url,
            params,
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                cookie
            }
        })
    }
}

5. 發起帶 cookies 參數的請求

在組件中 dispatch vuex 的 actions:

const fetchInitialData = async (store, config = { page: 1}) => {
    await store.dispatch('frontend/article/getList', config)
}
export default {
    name: 'frontend-index',
    prefetch: fetchInitialData,
    // 其餘代碼省略
}

在 vuex 的 actions 中, 從 store 裏讀取 cookies, 做爲參數傳給請求接口的函數

async ['getList']({commit, rootState: {cookies}}, config) {
    const { data: { data, code} } = await api.get('/api/article/list', config, cookies)
    // 其餘代碼省略
}

6. 幾個注意點

1, cookies的內容中不容許帶中文, 不知道從什麼版本開始, http-server 的 header 裏有中文就直接報錯
2, import store from '../store' 這種方式下的 store 是不會帶 cookies 的

這樣就完成了, 雖然不夠優雅, 但也總算是實現了, vue ssr 的文章真是太少了, 找資料太費勁了, 若是有更好的方法, 但願大神能不吝指正

完整源碼: https://github.com/lincenying...
完整實例: https://www.mmxiaowu.com/