Vue SSR の Cookie に関連する問題を分析する-jsチュートリアル-php.cn

この記事は主に Vue SSR の Cookie の問題を紹介しています。内容が非常に優れているので、参考として共有します。

一度ウェブサイトに複数のユーザーが関与すると、Vue SSR の Cookie は本当に大きな問題であり、初期の Cookie 注入から現在に至るまで、私は 3 つの解決策を考え出しました。ステートに Cookie を注入し、グローバルに Cookie を注入し、コンポーネントの asyncData メソッドに Cookie を注入します。

Vue のアップグレードにより、最初の解決策は適用できなくなり、2 番目の解決策も利用可能になりました。多くの制限があるため、私は 3 番目のオプションを考えました。具体的な実装方法について話しましょう:

最初のオプション

最初のオプションは適用されなくなりました。ここでは詳細には触れません

2 つのオプション

アイデア: ssr のコンテキストに cookie を挿入し、API をリクエストするときにそれらを読み取り、axios のヘッダーに追加します

1、まず、server.js のコンテキストに cookie を追加します

const context = { title: 'M.M.F 小屋', description: 'M.M.F 小屋', url: req.url, cookies: req.cookies } renderer.renderToString(context, (err, html) => { if (err) { return errorHandler(err) } res.end(html) })

ログイン後にコピー

その後、Vue は global.__VUE_SSR_CONTEXT__

2 にコンテキストを追加し、api.js で Cookie を読み取ります

import axios from 'axios' import qs from 'qs' import md5 from 'md5' import config from './config-server' const SSR = global.__VUE_SSR_CONTEXT__ const cookies = SSR.cookies || {} const parseCookie = cookies => { let cookie = '' Object.keys(cookies).forEach(item => { cookie+= item + '=' + cookies[item] + '; ' }) return cookie } export default { async post(url, data) { const cookie = parseCookie(cookies) const res = await axios({ method: 'post', url: config.api + url, data: qs.stringify(data), timeout: config.timeout, headers: { 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', cookie } }) return res }, }

ログイン後にコピー

なぜこれができるのですか?

デフォルトでは、Vue レンダーごとに、バンドルレンダラー新しい V8 コンテキストを作成し、バンドル全体を再実行します。アプリケーションコードはサーバープロセスから分離されているため、アクセスされる各ユーザーコンテキストは独立しており、相互に影響しません

ただし、Vue@2.3.0 以降、createBundleRenderer メソッドのオプションに runInNewContext オプションが追加されています。 runInNewContext : false、バンドルコードはサーバープロセスと同じグローバルコンテキストで実行されるため、グローバルに Cookie を置くことはできなくなりました。これにより、すべてのユーザーが同じ Cookie を共有することになるからです。

それでは、引き続き runInNewContext を true に設定しましょう。もちろんそれは可能ですが、特にアプリケーションが大きい場合、コンテキストを再作成してバンドル全体を実行するのは依然としてかなりのコストがかかります
たとえば、以前は 5 つのルーティングコンポーネントのみがレンダリングされ、loadtest の RPS は約 50 でした。しかし、SSR にバックグラウンドで 12 のルーティングコンポーネントを追加した後、RPS は直接 1 桁に下がりました...

それで今は3 番目の解決策が表示されます

3 番目の解決策

アイデア: コンポーネントの asyncData メソッドに Cookie をパラメータとして挿入し、パラメータを渡すことで Cookie を API に渡すこのメソッドは非常に優れていると言わざるを得ません。面倒ですが、これが私が考えるより良い方法です
ステップ 1:

server.js で、コンテキストに Cookie を挿入します

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 で、Cookie を渡しますasyncData メソッドのパラメータとして

Promise.all(matchedComponents.map(({asyncData}) => asyncData && asyncData({ store, route: router.currentRoute, cookies: context.cookies, isServer: true, isClient: false }))).then(() => { context.state = store.state context.isProd = process.env.NODE_ENV === 'production' resolve(app) }).catch(reject)

ログイン後にコピー

ステップ 3:

コンポーネントで、Cookie をパラメータとして Vuex アクションに渡します

export default { name: 'frontend-index', async asyncData({store, route, cookies}, config = { page: 1}) { config.cookies = cookies await store.dispatch('frontend/article/getArticleList', config) } // ..... }

ログイン後にコピー

ステップ 4:

Vuex では、Cookie がパラメータとしてapi

import api from '~api' const state = () => ({ lists: { data: [], hasNext: 0, page: 1, path: '' }, }) const actions = { async ['getArticleList']({commit, state}, config) { // vuex 作为临时缓存 if (state.lists.data.length > 0 && config.path === state.lists.path && config.page === 1) { return } let cookies if (config.cookies) { cookies = config.cookies delete config.cookies } const { data: { data, code} } = await api.get('frontend/article/list', {...config, cache: true}, cookies) if (data && code === 200) { commit('receiveArticleList', { ...config, ...data, }) } }, } const mutations = { ['receiveArticleList'](state, {list, hasNext, hasPrev, page, path}) { if (page === 1) { list = [].concat(list) } else { list = state.lists.data.concat(list) } state.lists = { data: list, hasNext, hasPrev, page, path } }, } const getters = { } export default { namespaced: true, state, actions, mutations, getters }

ログイン後にコピー

ここで、状態は関数の戻り値で初期化する必要があることに注意してください。そうでないと、状態はすべてのユーザーによって共有されます

ステップ 5:

API で Cookie を受信し、それに追加しますAxios のヘッダー

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 { get(url, data, cookies = {}) { const cookie = parseCookie(cookies) return axios({ method: 'get', url: config.api + url, data: qs.stringify(data), timeout: config.timeout, headers: { 'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', cookie } }) }, }

ログイン後にコピー

4 番目のスキーム

ステップ 1:Server.js 内で、コンテキスト内に Cookie を注入します

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:

エントリー中- server.js では、Cookie をパラメータとして 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 を再パッケージ化していない場合は、5 番目のステップを省略して、4 番目の部分で cookie を 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 が必要で、各ユーザーに表示されるコンテンツはキャッシュによって一貫性があり、非常に良い経験になります...

上記がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。