使用nuxt-auth-next完成Google授权后跳回登录页、用户未认证如何解决？

你的配置存在3处核心错误，导致auth模块无法正确解析Google返回的身份凭证，鉴权失败后被全局auth中间件拦截跳转回登录页：

• 直接将业务页面/apps设为重定向回调地址，nuxt-auth-next无法在该页面完成令牌的接收和解析逻辑
• 手动关闭了redirect.callback配置，断开了OAuth流程的回调处理链路
• codeChallengeMethod为空，不符合Google OAuth2的PKCE校验规则

1. 修正nuxt.config.js配置 #

修改后的auth配置如下：

auth: {
  strategies:{
    google: {
      clientId: "my_client_id.apps.googleusercontent.com",
      // 这里的地址要和Google Cloud控制台配置的授权回调地址完全一致
      redirectUri: `http://localhost:3000/login`,
      // 补全PKCE挑战方法，Google支持S256
      codeChallengeMethod: 'S256',
      scope: ['profile', 'email'],
      responseType: 'token id_token'
    }
  },
  redirect: {
    login: '/login',
    logout: false,
    home: '/apps',
    // 开启回调配置，和redirectUri保持一致
    callback: '/login'
  }
},

router: {
  middleware: ['auth']
}

2. 登录页跳过auth中间件 #

全局配置的auth中间件会拦截所有未登录请求，需要在login.vue中配置跳过中间件，避免回调时被拦截：

<template>
  <div>
    <div>
      <template>
        <b-button @click="loginClicked()">Login with Google</b-button>
      </template>
    </div>
  </div>
</template>

<script>
export default {
  // 新增：当前页面跳过auth中间件校验
  middleware: false,
  methods: {
    async loginClicked() {
      try {
        await this.$auth.loginWith('google');
      } catch (err) {
        console.log("login error: " + err);
      }
    }
  }
}
</script>

3. 核对Google Cloud控制台配置 #

进入Google Cloud控制台的「API和服务-凭据-OAuth 2.0客户端ID」设置页，确认两个配置：

• 已授权的JavaScript来源添加http://localhost:3000
• 已授权的重定向URI添加你配置的http://localhost:3000/login
  保存配置后等待1-2分钟生效，再重新测试登录流程即可。

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