Nuxt Auth结合Socialite实现社交登录的手动登录问题咨询

问题1：登录流程是否合理 #

你当前的流程是OAuth2授权码模式的标准实现，逻辑完全合理：由后端代理和OAuth服务端（Google）的交互，避免前端泄露Google客户端密钥，相比前端直接拉取授权的方式安全性更高。

问题2：setUserToken不生效的原因及解决方案 #

核心原因 #

setUserToken 是异步方法，你当前用同步逻辑判断loggedIn状态，此时状态还未更新，所以会一直返回未登录。
另外Nuxt Auth默认调用setUserToken后，会自动请求你配置的user端点拉取用户信息，拉取成功后才会将loggedIn置为true，如果你的user端点未配置、返回格式不符合要求或者鉴权失败，也会导致登录态设置失败。

不需要自定义策略的最简方案 #

第一步：先确认nuxt.config.js的auth配置适配Laravel Passport token

// nuxt.config.js
auth: {
  strategies: {
    local: {
      token: {
        property: 'token', // 对应后端返回的token字段名
        type: 'Bearer', // Laravel Passport默认需要的token前缀
        required: true,
      },
      user: {
        property: false, // 如果后端用户接口直接返回用户对象，设为false即可
        // 如果你不想用自动拉取用户的逻辑，也可以直接把endpoint设为false禁用自动请求
        // endpoint: '/api/user'
      }
    }
  }
}

第二步：修改前端回调逻辑，适配异步操作

如果你的后端回调接口只返回token，需要依赖自动拉取用户接口：

async mounted() {
  try {
    const response = await this.$axios.get(`login/social/google/callback`, {
      params: {code: this.$route.query.code}
    })
    // 等待setUserToken执行完成，包括用户信息拉取
    await this.$auth.setUserToken(response.data.token)
    if (this.$auth.loggedIn) {
      console.log('I am logged in!')
    } else {
      console.log('I am NOT logged in!')
    }
  } catch (e) {
    console.error('登录失败', e)
  }
}

如果想完全手动设置用户信息，不需要调用用户拉取接口，可以让后端回调接口同时返回token和用户信息：

// 后端回调接口返回格式示例：
// return $this->okResponse([
//   'token' => $nativeUser->createToken('social-login')->accessToken,
//   'user' => $nativeUser
// ]);

// 前端逻辑
async mounted() {
  const response = await this.$axios.get(`login/social/google/callback`, {
    params: {code: this.$route.query.code}
  })
  // 先设置token
  await this.$auth.setUserToken(response.data.token)
  // 手动设置用户信息，设置完成后loggedIn会自动变为true
  this.$auth.setUser(response.data.user)
}

注意事项 #

不需要手动修改loggedIn状态，该属性是Nuxt Auth内部的计算属性，只要token和用户信息都设置完成，会自动更新为true。
如果使用的是旧版@nuxtjs/auth包，建议升级到@nuxtjs/auth-next，旧版对异步操作的处理存在较多已知问题。

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