web-dev-qa-db-ja.com

Nuxt VuexストアのCookieの問題

今日の良い時間！

私のプロジェクトの数週間の開発の後、私は単純なVueからNuxtに移行することにしました。

主に私がSSRを必要としているためですが、Googleがページに表示されたJSを実行できるため、検索ボットに適切なコンテンツを生成できることはわかっています。

もう1つの理由は、プロジェクト開発の一般的なワークフローです。ルートや店舗などの自動インスタンス化のアイデアが好きです.

ただし、アプリケーションが_mode: universal_ではなく_mode: spa_で実行されている場合、アプリケーションのかなり奇妙な動作に直面しました。そして、私は_mode: spa_に切り替えたくないので、最初に移行したSSRを失います。

ストアにアカウントモジュールがあります。_account.js_は、ログイン/ログアウト、認証済みユーザーのプロファイルの取得、ログインリクエストから取得したトークンの保存など、アカウント管理に関連するすべての操作を処理します。 2FA TOTP手順を処理するためのロジックとして。

私のlegacyアプリケーションでは、次のコードを使用するだけで、Cookieからトークンを取得できました

_import Cookies from 'js-cookie';

export const state = {
   user: null,
   token: Cookies.get('token')
}
_

また、次のミューテーションを実行して、認証が成功した後にトークンを保存します。

_[types.ACCOUNT_SAVE_TOKEN] (state, { token, remember }) {
    state.token = token;
    Cookies.set('token', token, {
      expires: 365,
      httpOnly: true
    });
}
_

しかし、Nuxt.jsへの移行後、ログインするたびに、状態のトークン値が入力されますが、Cookieは設定されず、その後プロジェクト内の他のページに移動すると（pwaなので、リロードなしなど）、トークンはnullにリセットされます。

ただし、アプリケーションが_mode: spa_から_mode: universal_に切り替えられ、すべてが正常に機能している場合、この問題は解消されます。

私はgithubで多くの問題を読み、同じ問題を解決しようとしているWebサイト全体のクロールのかなりの部分を実行しましたが、どの提案も私にとってはうまくいきません。

私はSSRで動作していると主張するNPMから cookie-universal-nuxt パッケージをインストールしましたが、それでも毎回this.$cookies.get('token')にアクセスしようとしています、または他の場所（たとえば突然変異）で、nullでメソッド（get/set/remove）を使用することについてエラーが発生します。

少なくとも_mode: spa_に戻らなくても可能である場合、誰かがこの問題を克服する方法を知っていますか、またはアイデアを持っていますか？

追伸_npm run build|generate_を実行しているときに_mode: spa_を実行すると、通常のvue（コンテンツなし、ターゲット要素が再読み込みされるまでの構造のみ）と同じファイルが生成されます。

vue.jsvuejs2vuexserver-side-renderingnuxt.js
6
Ivan Zhivolupov

さて、約12時間この問題に頭を抱えようとした後、私は「汚い」方法を取り、各意見で多くの処理を行うミドルウェアを作成することにしました。

import CookieParser from 'cookieparser';

export default async function ({ store, req }) {
  if (!store.getters['account/check']) {
    if (!store.state.account.token) {
      if (process.server) {
        let requestCookies = CookieParser.parse(req.headers.cookie);
        if (requestCookies.hasOwnProperty('token')) {
          store.dispatch('account/saveToken', {
            token: requestCookies.token,
            remember: true
          });
        }
      }
    }
    if (store.state.account.token) {
      if (!store.state.account.user) {
         try {
           await store.dispatch('account/fetchUser');
         } catch (error) { }
      }
    }
  }
  return Promise.resolve();
}
3
Ivan Zhivolupov