Axios 拦截器仅在页面重新加载后工作

Question

当用户登录我的应用程序时，我正在尝试在所有请求中发送 Authorization 标头。

但是，无论我做什么，它都不起作用。

这是我的axios 实例和拦截器代码。

import axios from 'axios'
import storage from '@/services/storageService'

const user = storage.getObject('currentUser')

export const http = axios.create({
    baseURL: 'http://localhost/api',
})

http.interceptors.request.use((config) => {
    if(user){
        console.log(user)
        config.headers.Authorization = user.token
    }
    return config
}, (err) => {
    console.log(err)
    return Promise.reject(err)
})

在我的模块中，我正在像这样导入 http 实例

import { http } from '@/http'

export const getItems = () => {
   return http.get('items').then( response => response.data)
}

所以，澄清一下，上面的代码有效，但我的请求中没有标头。

要让interceptor 正常工作，我需要强制重新加载页面。

谁知道如何避免这种情况？

Answer 1

我按照@jacky 的提示解决了我的问题。现在我的代码运行如下。

import axios from 'axios'
import storage from '@/services/storageService'

export const http = axios.create({
    baseURL: 'http://localhost/api',
})

http.interceptors.request.use((config) => {
    let user = storage.getObject('currentUser')
    if(user){
        console.log(user)
        config.headers.Authorization = user.token
    }
    return config
}, (err) => {
    console.log(err)
    return Promise.reject(err)
})