Nuxt Vuex 商店 Cookie 问题

Posted 2023-02-22

【中文标题】Nuxt Vuex 商店 Cookie 问题

【英文标题】：Nuxt Vuex Store Cookies Issue

【发布时间】：2018-11-23 15:25:50

【问题描述】：

一天的好时光！

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

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

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

然而，当应用程序在mode: universal 而不是mode: spa 中运行时，我遇到了一个非常奇怪的行为。而且我不想切换到mode: spa，从那以后我失去了我首先要迁移的s-s-r。

我在商店中有一个帐户模块-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之后，每次登录时，都会填充状态下的token值，但是没有设置cookie，并且导航到项目内的其他页面后（它是 pwa，所以没有重新加载等）令牌被重置回 null。

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

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

我什至安装了来自 NPM 的 cookie-universal-nuxt 包，它声称可以与 s-s-r 一起使用，但每次我尝试在该州或其他任何地方访问 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();

【讨论】：

您能再详细说明一下吗？我正在努力使用httpOnly cookie 来保证安全，但我无法找回它们。