Vuejs2 登录后使用API令牌更新Vue Axios基本实例

在我的Vue应用程序（第一个Vue项目，如果这可能是一个基本问题，很抱歉）中，我创建了一个axios base实例，如下所示：

import axios from 'axios'
import router from '@/router'

export const API = axios.create({
    baseURL: 'http://api-url.com',
    headers: {
        Authorization: 'Bearer ' + localStorage.getItem('api_token')
    },
    validateStatus: function (status) {

        if (status == 401) {
            router.push('/login');
        } else {
            return status;
        }
    }
})

当我登录时，API令牌通过以下方式保存：

localStorage.setItem('api_token', response.data.api_token)

---

登录thow后，直到重新加载浏览器，axios基本实例才会使用令牌进行更新。我怎样才能改变这一点

您可以像这样更新axios实例

export const API = axios.create({
  baseURL: 'http://localhost:8000/',
  withCredentials: false
})

export function getAPI () {
  return API
}

export function setHeader (key, value) {
  API.defaults.headers.common[key] = value
}

export function removeHeader (key) {
  delete API.defaults.headers.common[key]
}