关于vue.js：Nuxt Vuex商店Cookie问题

Nuxt Vuex Store Cookies Issue

一天中的好时光！

在我的项目进行了几周的开发之后，我决定从普通的Vue迁移到Nuxt。

主要是因为我需要SSR，尽管我知道Google可以执行页面上显示的JS，因此可以为其搜索机器人生成适当的内容。

另一个原因是项目开发的一般工作流程。我喜欢自动实例化路线，商店等的想法。

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

I \\'在商店中有一个帐户模块-account.js，负责处理与帐户管理相关的任何操作，例如登录/注销，获取经过身份验证的用户的个人资料，存储从登录请求中获得的令牌以及处理2FA TOTP程序的逻辑。

在旧版应用程序中，我只需使用以下代码

即可从cookie中获取令牌。

1
2
3
4
5
6

import Cookies from 'js-cookie';

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

通过执行以下突变，在成功认证后保存令牌：

1
2
3
4
5
6
7

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

但是在迁移到Nuxt.js之后，每次登录时，都会填充该状态中的令牌值，但未设置cookie，并且导航到项目内的另一页(它是pwa，所以没有重新加载等)，令牌重置为null。

但是，如果将应用程序从mode: universal切换到mode: spa，并且一切正常，此问题就不存在了。

我已经阅读了github上的许多问题，并且在试图解决同一问题的网站上进行了大量的爬网，尽管没有建议对我有用。

我什至从NPM安装了cookie-universal-nuxt软件包，该软件包声称可以与SSR一起使用，但是每次我尝试在该状态或其他任何地方访问this.$cookies.get('token')时(突变例如)，我在使用null上的方法(获取/设置/删除)时遇到错误。

至少在没有回到mode: spa的情况下，是否有人知道或有解决此问题的想法？

P.S。在mode: spa中运行npm run build|generate会产生与普通vue相同的文件(不包含内容，只是结构，直到重新读取目标元素为止)。

好吧，经过大约12个小时的努力，我决定解决这个问题，我决定采用"肮脏"的方式来创建中间件，我认为该中间件正在对每个请求进行大量处理。 >

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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