如何在Nuxt3中清除所有Cookie？

核心前提：前端无法直接删除Google的跨域/HttpOnly Cookie #

浏览器安全机制限制了前端JS只能访问和操作**同域、非HttpOnly、与当前页面协议匹配（比如HTTPS页面仅能操作Secure Cookie）**的Cookie。Google生成的大部分Cookie（如.google.com域下、HttpOnly类型）前端根本无权触碰，所以直接用useCookie或原生JS循环删除的思路从一开始就行不通。

可行解决方案 #

1. 调用Google官方的登出/会话清理接口

Google Picker依赖Google Identity Services，即使没拿到用户的clientId，也能通过官方API触发会话清理，让Google自行删除相关Cookie：

• 若使用Google OAuth 2.0，撤销令牌后额外调用google.accounts.oauth2.signOut()方法（需确保已加载google.accounts.oauth2库）。
• 若使用旧版gapi的Google Sign-In，可调用gapi.auth2.getAuthInstance().signOut()，之后再调用disconnect()彻底清除会话。

在Nuxt3中，无需全组件套client-only，只需在客户端环境下执行相关逻辑：

onMounted(async () => {
  if (process.client) {
    // 异步加载Google身份服务脚本
    await new Promise(resolve => {
      const script = document.createElement('script');
      script.src = 'https://accounts.google.com/gsi/client';
      script.onload = resolve;
      document.body.appendChild(script);
    });

    // 表单提交处理函数
    const handleSubmit = () => {
      // 先执行你的Picker令牌撤销逻辑
      revokeYourPickerToken();
      // 触发Google登出清理会话
      if (window.google?.accounts?.oauth2) {
        window.google.accounts.oauth2.signOut();
      }
    };
  }
});

2. 优化Nuxt客户端脚本加载方式

用Nuxt的useScript组合式API异步加载Google脚本，避免阻塞组件渲染：

const { google } = await useScript('https://accounts.google.com/gsi/client', {
  strategy: 'lazyOnload'
});

// 表单提交处理
const handleFormSubmit = async () => {
  // 执行令牌撤销
  await revokePickerToken();
  // 触发Google登出
  if (google?.accounts?.oauth2) {
    google.accounts.oauth2.signOut();
  }
};

3. 补充说明

如果用户是通过Picker临时授权，提交后先调用令牌撤销接口（你已在执行），再结合登出操作，就能最大程度清理Google会话痕迹。注意：若仍有残留的Google域Cookie，前端无法干预，只能通过用户主动登出或Google会话过期自动清理。

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