设置httpOnly:true后，Pinia-plugin-persistedstate存储Token失败问题

核心问题 #

浏览器安全机制禁止前端JavaScript设置或修改httpOnly: true的Cookie，这类Cookie只能通过服务器端的Set-Cookie响应头创建和管理。你在Pinia持久化配置中设置httpOnly: true，本质是让插件尝试用前端JS操作httpOnly Cookie，直接违反浏览器规则，因此触发错误。

解决方案 #

1. 调整Pinia持久化配置

移除httpOnly: true配置，前端仅存储非敏感认证状态（如isAuthenticated）和可被JS访问的access token（若需持久化）：

// stores/auth.js
import { defineStore } from 'pinia';
export const useAuthStore = defineStore(
  'auth',
  () => {
    const token = ref({}); // state
    function setToken(tk) {
      token.value = tk;
    }

    const isAuthenticated = ref(false); // state
    function setAuthenticated(aut) {
      isAuthenticated.value = aut;
    }

    // Resetting states
    function $reset() {
      token.value = {};
      isAuthenticated.value = false;
    }
    return { token, setToken, isAuthenticated, setAuthenticated, $reset };
  },

  {
    persist: {
      storage: persistedState.cookiesWithOptions({
        sameSite: 'strict',
        secure: process.env.NODE_ENV === 'production', // 生产环境开启，仅HTTPS下生效
        // 移除httpOnly配置，前端无法设置该属性
      }),
    },
  }
);

2. 修正JWT认证流程（关键）

敏感的refresh token必须由服务器端设置为httpOnly Cookie，前端无法直接访问，以此避免XSS攻击：

• 登录接口返回响应时，服务器通过Set-Cookie头设置refresh token：

  Set-Cookie: refresh_token=你的refresh_token值; HttpOnly; SameSite=Strict; Path=/; Secure
  

• 前端将返回的access token存储在Pinia（可持久化到普通Cookie或localStorage），用于后续接口请求鉴权。
• 当access token过期时，前端调用刷新token接口，服务器自动读取httpOnly的refresh token，验证通过后返回新的access token。

错误原因补充 #

报错提示“已有一个HTTP-Only Cookie，但脚本尝试存储新的”，本质是浏览器拦截了前端JS创建httpOnly Cookie的操作——即使之前没有同名httpOnly Cookie，浏览器也会直接阻止该非法操作，抛出类似错误提示。

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