Nuxt.js auth-module获取Facebook登录access_token问题求助

我来帮你梳理下问题的根源和解决办法，你遇到的情况其实是Facebook OAuth响应格式和auth-module自动处理逻辑的配合问题：

问题出在哪？ #

1. URL参数位置的问题：Facebook默认会把access_token放在URL的hash片段（也就是#后面），而Vue Router的$route.query只能读取?后面的查询参数，自然拿不到hash里的内容。
2. 回调页面的处理逻辑：你手动创建了回调页面，但auth-module本身会自动处理OAuth回调的解析和token存储，自定义页面反而会打断这个流程，导致token没被存入auth状态。

一步步解决 #

1. 检查并修正nuxt.config.js的auth配置 #

首先确保你的auth策略配置正确，尤其是Facebook的客户端ID和回调地址，要和Facebook开发者后台的设置完全匹配：

// nuxt.config.js
export default {
  modules: ['@nuxtjs/auth'],
  auth: {
    strategies: {
      facebook: {
        client_id: '你的Facebook应用ID',
        redirect_uri: 'https://localhost:3000/auth/facebook/callback' // 用auth-module默认的回调路径更省心
      }
    },
    redirect: {
      login: '/login', // 未登录时跳转到登录页
      home: '/' // 登录成功后自动跳首页
    }
  }
}

2. 删除你手动创建的回调页面 #

pages/facebook/oauth_callback/index.vue这个页面不需要存在，auth-module会自动处理/auth/facebook/callback路径的请求，解析URL里的token并完成登录状态的存储。

3. 调整Facebook应用的重定向URI #

去Facebook开发者后台的「产品 > Facebook登录 > 设置」里，把「有效OAuth重定向URI」设置成和nuxt.config里一模一样的地址（包括https、localhost:3000和后面的路径），这一步很关键，不匹配的话会直接登录失败。

4. 优化登录方法的代码 #

你的登录方法有个小语法问题，loginWith是异步方法，最好用async/await包裹，方便处理错误：

// pages/login.vue
export default {
  methods: {
    async loginWithFacebook() {
      try {
        await this.$auth.loginWith('facebook')
        // 登录成功后会自动跳转到home页面，不需要手动处理
      } catch (err) {
        console.log('登录出错了:', err)
      }
    }
  }
}

5. 验证token是否正确获取 #

登录成功后，你可以在任意组件里直接通过this.$auth.strategy.token.get()拿到access_token，或者通过this.$auth.user获取用户信息，比如：

// 随便找个页面测试
<template>
  <div>
    <h2>登录状态测试</h2>
    <p>当前用户: {{ $auth.user }}</p>
    <p>Access Token: {{ $auth.strategy.token.get() }}</p>
  </div>
</template>

如果还是遇到hash参数的问题，可以试试在Facebook策略里添加response_mode: 'query'，强制Facebook把token放在?后面的查询参数里返回：

// nuxt.config.js里的facebook策略
facebook: {
  client_id: '你的Facebook应用ID',
  redirect_uri: 'https://localhost:3000/auth/facebook/callback',
  response_mode: 'query'
}

按照这些步骤操作，应该就能顺利拿到access_token啦！

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