Apollo Vue对接Node GraphQL接口无法携带JWT请求头问题求助

核心问题根因 #

• 你在main.js中自行创建了未挂载authLink的Apollo客户端实例，完全没有使用vue-apollo.js中封装好的带权限头配置的实例，导致请求不会携带Authorization头
• authLink返回格式错误，setContext要求请求头必须放在返回对象的headers字段下，你之前的写法直接将头字段平铺到外层，无法生效
• 误用await调用同步API：localStorage的getItem是同步方法，不需要加await，多余的await会导致取值时序异常
• Authorization头格式不符合后端校验要求，缺少Bearer 前缀

具体修复步骤 #

1. 修复vue-apollo.js中的authLink配置 #

const authLink = setContext((_, { headers }) => {
  // 去掉await，localStorage是同步API
  const token = localStorage.getItem(AUTH_TOKEN)
  return {
    // 请求头必须套在headers字段下
    headers: {
      ...headers,
      // 补充后端要求的Bearer前缀
      Authorization: token ? `Bearer ${token}` : ''
    }
  }
})

2. 修复main.js的Apollo实例初始化逻辑 #

不要自行创建Apollo客户端，直接使用vue-apollo.js中封装好的createProvider方法，确保权限配置生效：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
import VueScreen from 'vue-screen'
import { createProvider } from './vue-apollo' // 导入你封装的配置

Vue.config.productionTip = false
Vue.use(VueScreen)

// 用封装好的方法创建apollo实例
const { apolloProvider, apolloClient } = createProvider()
// 挂载到Vue原型，方便全局调用登录/登出方法
Vue.prototype.$apolloClient = apolloClient

new Vue({
  router,
  store,
  vuetify,
  apolloProvider,
  render: h => h(App)
}).$mount('#app')

3. 修复Vuex登录逻辑 #

登录成功获取到token后，调用onLogin时传入全局挂载的正确apollo实例即可：

// 登录成功后调用
import { onLogin } from '@/vue-apollo'

await onLogin(this.$apolloClient, 后端返回的token)

4. 可选：检查后端CORS配置 #

因为前后端端口不同属于跨域请求，需要确保后端CORS配置允许Authorization头：

// 以express为例的配置参考
app.use(cors({
  origin: 'http://localhost:8081',
  allowedHeaders: ['Content-Type', 'Authorization']
}))

内容的提问来源于stack exchange，提问作者Agustin G.