Nuxt.js使用auth谷歌策略登录后跳转带参/login页且未登录如何解决

配置补全及操作步骤 #

1. 补充nuxt.config.js必填配置 #

你当前使用authorization code授权流（responseType: 'code'），缺少token换取、用户信息获取端点，以及重定向规则配置，需补充如下内容：

auth: {
    strategies: {
      google: {
        clientId: process.env.GOOGLE_CLIENT_ID,
        responseType: 'code',
        codeChallengeMethod: '',
        // 新增：授权流所需接口配置
        endpoints: {
          // 接收谷歌返回的code、换取access token的后端接口地址
          token: 'YOUR_BACKEND_TOKEN_EXCHANGE_URL',
          // 携带access token获取用户信息的后端接口地址
          userInfo: 'YOUR_BACKEND_USER_INFO_URL'
        },
        // 可选：用户信息字段映射，根据后端返回结构调整
        user: {
          property: 'data'
        }
      },
   },
   // 新增：重定向规则配置，需和谷歌云后台授权回调地址完全一致
   redirect: {
    login: '/login',
    logout: '/',
    callback: '/login',
    home: '/'
  }
}

如果是纯前端无后端的场景，可以直接切换为隐式授权流，无需配置后端接口：

auth: {
    strategies: {
      google: {
        clientId: process.env.GOOGLE_CLIENT_ID,
        // 替换为隐式流配置，无需后端参与
        responseType: 'id_token token',
      },
   },
   redirect: {
    callback: '/login'
  }
}

2. 补充登录页面回调处理逻辑 #

谷歌回调返回/login路由携带的code、state参数不会被自动处理，需要在login.vue的生命周期钩子中添加回调处理代码：

async mounted() {
  const { query } = this.$route
  // 匹配谷歌回调参数特征
  if (query.code && query.state) {
    try {
      // 调用auth内置方法处理回调、完成登录状态写入
      await this.$auth.handleCallback()
      // 登录完成后跳转到预设页面
      this.$router.push(this.$auth.redirectPath || '/')
    } catch (err) {
      console.error('登录回调处理失败', err)
    }
  }
}

3. 谷歌云后台配置校验 #

• 确认谷歌云控制台OAuth 2.0客户端配置中，「授权重定向URI」和你nuxt配置的redirect.callback地址完全匹配，本地开发示例为http://localhost:3000/login
• 确认已经开启Google People API，否则无法正常获取用户信息

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