Nuxt3中使用useFetch时如何设置默认授权请求头？

在 Nuxt2 中可以通过 axios 快速设置默认请求头，登录时配置授权信息：

axios.defaults.headers.common['Authorization'] = 'Token ' + token

登出时清空授权头：

axios.defaults.headers.common['Authorization'] = ''

发起请求时会自动携带这些配置好的请求头。但 Nuxt3 已弃用 axios，官方推荐使用 useFetch，如何实现类似的默认授权请求头功能？

尝试方案 #

为了实现需求，自定义了封装后的 fetch 方法：

1. 创建插件文件 plugins/api.js：

//plugins/api.js
export default defineNuxtPlugin(() => {
    const store = useUserStore()
    const $api = $fetch.create({
        baseURL: 'http://127.0.0.1:8000/',
        onRequest({ request, options, error }) {
            console.log('hello from the api plugin')
            if (store.user.access) {
                // Add Authorization header
                options.headers.Authorization = "Bearer " + store.user.access
            }
            else {
                options.headers.Authorization = ''
            }
        },
    })
    // Expose to useNuxtApp().$api
    return {
        provide: {
            api: $api
        }
    }
})

2. 创建组合式函数文件 composables/useMyFetch.js：

//composables/useMyFetch.js
export const useMyFetch = (request, opts) => {
    return useFetch(request, {
        ...opts,
        $fetch: useNuxtApp().$api,
    })
}

但使用 useMyFetch 发起请求时遇到问题：api.js 仅在应用启动时加载一次，登录后存入状态管理的 token 无法被插件识别，导致后续需要授权的请求没有携带 Bearer token。

解决方法 #

排查后发现，组件中额外定义了 onRequest 函数，移除该函数后，插件中的授权头逻辑正常生效，问题解决。

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