Nuxt Auth Google策略本地正常线上失效，偶现401无效凭证错误

我之前在部署Nuxt SPA的Google认证功能时，也碰到过一模一样的本地正常、线上偶尔报401无效凭证的问题。结合你的配置和代码，大概率是这几个细节没处理好，咱们一步步来排查解决：

1. 检查Google开发者控制台的授权配置 #

这是最常见的问题根源：

• 登录Google Cloud Console，找到你的项目，进入API和服务 > 凭据
• 找到对应的OAuth 2.0客户端ID，检查已获授权的JavaScript来源和已获授权的重定向URI
  • 本地的http://localhost:3000没问题，但线上必须添加你的实际域名（比如https://your-production-domain.com）
  • 重定向URI一定要加上线上的回调地址：https://your-production-domain.com/callback，注意要和nuxt.config.js里的redirect.callback完全一致
• 别忘了保存修改，谷歌的配置有时候需要几分钟生效，改完后等一会儿再测试

2. 补充Callback路由页面 #

你的SPA模式下，谷歌认证完成后会重定向到/callback，但如果没有对应的页面处理回调逻辑，Auth模块无法正确解析和存储凭证，就会导致401：

在pages目录下新建callback.vue，内容很简单：

<template>
  <div>正在处理登录，请稍候...</div>
</template>

<script>
export default {
  async created() {
    // 让Auth模块处理谷歌返回的凭证
    await this.$auth.handleCallback()
    // 处理完成后跳转到首页
    this.$router.push('/')
  }
}
</script>

3. 确保线上环境使用HTTPS #

谷歌OAuth 2.0现在强制要求线上环境必须使用HTTPS（localhost除外），如果你的网站是HTTP部署的，谷歌会拒绝传递有效凭证，直接返回401。

解决方法：

• 如果是自己部署，用Nginx配置SSL证书（比如Let's Encrypt的免费证书）
• 如果是托管平台（比如Vercel、Netlify），直接开启平台提供的HTTPS服务

4. 排查凭证缓存和跨域问题 #

• 有时候浏览器缓存的旧凭证会干扰新的登录请求，可以在登录前先清除旧会话：
  修改login.vue里的loginClicked方法：

  async loginClicked() {
    try {
      // 先清除旧的认证状态
      await this.$auth.logout()
      let res = await this.$auth.loginWith('google');
      console.log("login result: ", res);
    } catch (err) {
      this.consoleLog("login error: " + err);
    }
  }
  

• 检查nuxt.config.js里的axios配置，确保线上的baseURL和网站域名一致，避免跨域导致凭证无法正确传递

最后验证步骤 #

1. 确认谷歌控制台的授权配置完全包含线上域名和回调地址
2. 部署新增的callback.vue页面
3. 确保线上网站是HTTPS访问
4. 清除浏览器缓存后重新测试

按这个流程走下来，基本能解决线上401的问题。

内容的提问来源于stack exchange，提问作者Sébastien Serre