Nuxt 3 SSR刷新受保护路由时无法发送Cookie的问题求助

1. 修复localStorage is not defined错误 #

前端日志的这个报错，是因为SSR过程中服务器端不存在localStorage对象。把你userStore里所有用到localStorage的地方，替换成Nuxt提供的useCookie组合式——它能自动兼容SSR和CSR环境：

// composables/stores/user.js 示例
export const useUserStore = defineStore('user', () => {
  // 用useCookie替代localStorage存储token
  const accessToken = useCookie('access_token');
  const refreshToken = useCookie('refresh_token');

  const clearUser = () => {
    accessToken.value = null;
    refreshToken.value = null;
  };

  // ...其他store逻辑
});

2. 让Axios在SSR时正确携带Cookie #

SSR时，浏览器的Cookie会通过请求头发送到Nuxt服务器，但Axios发起的后端请求不会自动携带这些Cookie，需要手动转发。修改你的Axios插件plugins/api.js：

import axios from 'axios';
import { useUserStore } from '~/composables/stores/user';
import { useRouter, useRequestHeaders } from '#imports';

export default defineNuxtPlugin(nuxtApp => {
  const router = useRouter();
  // SSR时获取请求头中的Cookie
  const headers = useRequestHeaders(['cookie']);
  
  const api = axios.create({
    baseURL: nuxtApp.$config.public.apiBaseUrl,
    withCredentials: true,
    // 服务器端渲染时，把请求头的Cookie传递给Axios
    ...(process.server && { headers }),
  });

  // ...原拦截器逻辑保持不变

  return {
    provide: {
      api,
    },
  };
});

3. 调整后端Cookie配置 #

确保后端设置Cookie时，配置正确的跨域和安全参数：

// Express后端设置Cookie示例
res.cookie('access_token', accessToken, {
  httpOnly: true, // 可选，提升安全性
  secure: process.env.NODE_ENV === 'production', // 生产环境启用HTTPS
  sameSite: 'lax', // 跨域场景可设为'none'（需配合secure: true）
  maxAge: 15 * 60 * 1000, // 15分钟有效期
  domain: process.env.COOKIE_DOMAIN || 'localhost',
});

同时后端CORS配置要允许携带凭证：

app.use(cors({
  origin: process.env.FRONTEND_URL || 'http://localhost:3001',
  credentials: true,
}));

4. 优化受保护路由的中间件 #

创建路由中间件，在SSR和CSR场景下统一验证用户身份：

// middleware/auth.js
export default defineNuxtRouteMiddleware(async (to, from) => {
  const accessToken = useCookie('access_token');

  if (!accessToken.value) {
    return navigateTo('/login');
  }

  // 可选：验证token有效性
  try {
    const { $api } = useNuxtApp();
    await $api.get('/users/me');
  } catch (error) {
    const userStore = useUserStore();
    userStore.clearUser();
    return navigateTo('/login');
  }
});

在受保护页面中启用中间件：

// 目标页面组件
definePageMeta({
  middleware: 'auth',
});

关键注意点 #

• 禁止在SSR期间调用浏览器专属API（如localStorage、window），状态存储优先用useCookie或Nuxt官方状态管理方案。
• Axios必须开启withCredentials: true，确保客户端请求自动携带Cookie。
• 跨域场景下，后端CORS和Cookie的sameSite、domain配置必须匹配，否则Cookie无法正常传递。

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