Nuxt Vuex Store Cookies问题

Question

您好！

经过几周的开发，我决定将我的项目从普通的Vue迁移到Nuxt。主要是因为我需要SSR，尽管我知道谷歌可以执行页面上呈现的JS，从而为其搜索机器人生成适当的内容。

另一个原因是项目开发的一般工作流程。我喜欢自动实例化路由、存储等想法。

然而，当应用程序在mode: universal而不是mode: spa下运行时，我遇到了一个非常奇怪的行为。我不想切换到mode: spa，因为那样我就失去了我最初迁移的SSR。

我在存储中有一个账户模块-account.js，它负责处理与账户管理相关的任何操作，例如登录/注销、获取已验证用户的配置文件、存储从登录请求获得的令牌以及处理2FA TOTP过程的逻辑。

在我的旧版应用程序中，我只需使用以下代码即可从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 后，每次登录时，状态中的 token 值会被填充，但未设置任何 cookie，在项目内导航到其他页面后 (它是 PWA, 因此不重新加载等) token 会重置为空。 然而，如果将应用程序从 mode: universal 切换到 mode: spa，问题就不存在了，一切都正常工作。 我已经阅读了 Github 上的许多问题，并且对试图解决相同问题的网站进行了大量搜索，但是没有一个建议适用于我。 我甚至安装了来自 NPM 的 cookie-universal-nuxt 包，该包声称可以与 SSR 一起使用，但是每次尝试在 state 或任何其他地方 (例如 mutations) 中访问 this.$cookies.get('token') 时，我只会得到关于在 null 上使用方法 (get/set/remove) 的错误。 有人知道或有什么想法如何克服这个问题，至少是否可能不返回到 mode: spa？ P.S. 在 mode: spa 下运行 npm run build|generate 会产生与普通 vue 相同的文件 (没有内容，只有结构直到达到目标元素)。

- Ivan Zhivolupov

Answer 1

好的，经过大约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();
}

- Ivan Zhivolupov

---

请您再详细阐述一下吗？我正在尝试使用“httpOnly” cookie 保持安全，但却无法取回它们。请注意，我的翻译不会改变原意，只会使语言更加通俗易懂。 - zerohedge

Answer 2

看起来 useCookie 已经为这种情况创建了

- Michael Dausmann