Nuxt Vuex商店Cookie问题-Java 学习之路

一天的美好时光！

经过几周的项目开发，我决定从普通的Vue迁移到Nuxt .

主要是因为我需要SSR，虽然我知道Google可以执行页面上显示的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 之后，每次登录时，状态中的令牌值都会被填充，但是没有设置cookie，并且在导航到项目内的其他页面之后（它是pwa，所以没有重新加载等）令牌重置为null .

但是，如果应用程序从 mode: universal 切换到 mode: spa 并且一切正常，那么这个问题就消失了 .

我已经在github上阅读了很多问题，并且在尝试解决相同问题的网站上进行了大量的爬行，尽管这些建议都没有对我有用 .

我甚至安装了来自NPM的cookie-universal-nuxt软件包，声称与SSR一起工作，但是每当我试图访问状态或其他任何地方的 this.$cookies.get('token') 时（例如突变），我只是得到关于使用 null 上的方法（get / set / remove） .

有没有人知道或知道如何克服这个问题，至少如果有可能不回到 mode: spa ？

附：在 mode: spa 中，运行 npm run build|generate 会产生与正常vue（没有内容，只是读取目标元素之前的结构）相同的文件 .

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

回复于 2024-05-03T14:50:21+08:00

Nuxt Vuex商店Cookie问题

1 回答

相关问题