Vue3项目中如何在Axios配置文件中获取Auth0访问令牌？

报错原因 #

useAuth0()是Vue组合式API钩子，仅能在组件的setup()函数、<script setup>或其他组合式函数中调用。直接在普通JS文件（如axios.js）里调用会脱离Vue组件上下文，导致返回undefined。

方案一：直接使用Auth0 SDK实例（推荐） #

在项目入口文件中初始化Auth0时保存实例引用，再在Axios配置文件中导入该实例调用令牌获取方法。

1. 修改入口文件（main.js）

import { createApp } from 'vue'
import { createAuth0 } from '@auth0/auth0-vue'
import App from './App.vue'
import axios from './config/axios'

const app = createApp(App)

// 初始化Auth0并导出实例
export const auth0 = createAuth0({
  domain: '你的Auth0域名',
  clientId: '你的客户端ID',
  authorizationParams: {
    redirect_uri: window.location.origin
  }
})

app.use(auth0)
app.config.globalProperties.$axios = axios
app.mount('#app')

2. 配置Axios拦截器（/config/axios.js）

import axios from 'axios'
import { auth0 } from '../main'

const api = axios.create({
  baseURL: '你的后端API地址'
})

api.interceptors.request.use(async (config) => {
  try {
    const token = await auth0.getAccessTokenSilently()
    config.headers.Authorization = `Bearer ${token}`
  } catch (error) {
    console.error('获取访问令牌失败:', error)
    // 可添加跳转登录页等异常处理逻辑
  }
  return config
})

export default api

方案二：组合式函数封装Axios #

创建组合式函数，在组件上下文内初始化带拦截器的Axios实例，确保useAuth0()能正常调用。

1. 创建组合式函数（/composables/useApi.js）

import axios from 'axios'
import { useAuth0 } from '@auth0/auth0-vue'

export function useApi() {
  const { getAccessTokenSilently } = useAuth0()

  const api = axios.create({
    baseURL: '你的后端API地址'
  })

  api.interceptors.request.use(async (config) => {
    const token = await getAccessTokenSilently()
    config.headers.Authorization = `Bearer ${token}`
    return config
  })

  return api
}

2. 组件内使用

<script setup>
import { useApi } from '@/composables/useApi'

const api = useApi()

async function fetchData() {
  const response = await api.get('/data')
  console.log(response.data)
}
</script>

方案三：Pinia同步令牌存储 #

在Auth0状态变更时将令牌存入Pinia，Axios拦截器直接从Pinia读取令牌。

1. 创建Pinia状态仓库（stores/authStore.js）

import { defineStore } from 'pinia'
import { useAuth0 } from '@auth0/auth0-vue'

export const useAuthStore = defineStore('auth', {
  state: () => ({
    accessToken: null
  }),
  actions: {
    async initToken() {
      const { getAccessTokenSilently, isAuthenticated } = useAuth0()
      if (isAuthenticated.value) {
        this.accessToken = await getAccessTokenSilently()
      }
    },
    clearToken() {
      this.accessToken = null
    }
  }
})

2. 监听Auth0状态并同步令牌（App.vue）

<script setup>
import { useAuth0 } from '@auth0/auth0-vue'
import { useAuthStore } from '@/stores/authStore'
import { watch } from 'vue'

const { isAuthenticated } = useAuth0()
const authStore = useAuthStore()

watch(isAuthenticated, async (newVal) => {
  newVal ? await authStore.initToken() : authStore.clearToken()
}, { immediate: true })
</script>

3. 配置Axios拦截器（/config/axios.js）

import axios from 'axios'
import { useAuthStore } from '../stores/authStore'
import { createPinia } from 'pinia'

const pinia = createPinia()
const authStore = useAuthStore(pinia)

const api = axios.create({
  baseURL: '你的后端API地址'
})

api.interceptors.request.use((config) => {
  if (authStore.accessToken) {
    config.headers.Authorization = `Bearer ${authStore.accessToken}`
  }
  return config
})

export default api

额外注意事项 #

• 可在响应拦截器中捕获401错误，触发令牌刷新并重试请求
• 确保Auth0初始化完成后再发起API请求，避免令牌未就绪的问题

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