Vue Nuxt 2中间件用户请求冲突问题及解决方案咨询

问题根源 #

在Nuxt 2服务端渲染（SSR）场景下，Pinia默认会复用store实例，再加上异步请求的竞态条件，当多个用户同时发起请求时，后完成的请求会覆盖前一个请求的routeData状态，导致页面渲染出错误的产品数据。

解决方案 #

1. 修复Pinia的请求隔离配置

确保Pinia在Nuxt 2中为每个请求创建独立的store实例，避免服务端状态共享：

• 确认已安装@pinia/nuxt依赖
• 在nuxt.config.js中配置Pinia模块：

export default {
  modules: [
    '@pinia/nuxt',
  ],
  pinia: {
    autoImports: [
      'defineStore',
      ['defineStore', 'definePiniaStore'],
    ],
  },
}

2. 处理异步请求的竞态条件

在URL解析中间件中，添加请求校验逻辑，确保只有当前请求的结果才会更新对应store状态：
修改url-resolver.ts：

import { Middleware } from '@nuxt/types';
import { usePageStore } from '~/stores/page';
import { Logger } from '~/helpers/logger';
import { RoutableInterface } from '~/modules/GraphQL/types';

const urlResolverMiddleware: Middleware = async (context) => {
  const pageStore = usePageStore();
  const { path } = context.route;
  
  const clearUrl = path.replace(/[a-z]+\/[cp|]\//gi, '').replace(`/${context.i18n.locale}`, '');
  // 记录当前请求的目标URL
  const targetUrl = clearUrl;
  
  Logger.debug('middleware/url-resolver', clearUrl);

  const { data, errors } = await context.app.$vsf.$magento.api.route(clearUrl);
  
  // 请求完成后，校验当前路由是否仍为发起请求时的路由
  const currentClearUrl = context.route.path.replace(/[a-z]+\/[cp|]\//gi, '').replace(`/${context.i18n.locale}`, '');
  if (currentClearUrl !== targetUrl) {
    Logger.debug('middleware/url-resolver: 已切换路由，跳过状态更新');
    return;
  }

  Logger.debug('middleware/url-resolver/result', { data, errors });

  const results: RoutableInterface | null = data?.route ?? null;

  if (!results || errors?.length) context.error({ statusCode: 404 });
  
  pageStore.$patch((state) => {
    state.routeData = results;
  });
};

export default urlResolverMiddleware;

3. 排查Vue Storefront API缓存

检查Vue Storefront的Magento API是否开启了全局缓存，如果存在缓存，需确保缓存键包含clearUrl和locale等请求唯一标识，避免不同用户的请求返回相同缓存结果。

原理说明 #

• Pinia的请求隔离配置确保每个服务端请求拥有独立的store实例，从根源避免状态共享冲突
• 竞态条件处理通过对比请求前后的路由，过滤掉已失效的异步请求结果，防止错误更新状态
• API缓存校验确保不同请求的响应不会被错误复用

内容的提问来源于stack exchange，提问作者Harshit Vaishnav