如何在Nuxt.js中设置axios为全局默认原型并给请求头添加token

你要的效果无法完全仅靠nuxt.config.js实现：localStorage是浏览器端独有的API，nuxt.config.js会在服务端/构建阶段运行，直接读取localStorage会抛出未定义错误，需要搭配客户端插件完成，具体步骤如下：

• 第一步：安装官方axios模块
  先安装Nuxt官方维护的axios模块，它会自动完成全局挂载，不需要手动给Vue原型添加属性：
  安装命令：npm install @nuxtjs/axios

• 第二步：配置nuxt.config.js
  在配置文件中注册axios模块、做基础配置，如果需要把全局挂载名改成你原Vue项目里的$http，可以添加alias配置：

export default {
  // 注册axios模块
  modules: [
    '@nuxtjs/axios',
  ],
  // axios基础配置项
  axios: {
    baseURL: '你的接口基础地址', // 按实际业务替换
    alias: '$http', // 配置后全局挂载名为$http，和原Vue项目用法保持一致
  },
  // 注册客户端侧的axios插件
  plugins: [
    { src: '~/plugins/axios.js', mode: 'client' }
  ]
}

• 第三步：编写客户端axios插件
  在项目根目录的plugins文件夹下新建axios.js文件，实现localStorage读取和token注入逻辑，推荐搭配请求拦截器使用，保证每次请求都携带最新的token：

export default function ({ $http }) {
  // 初始化时读取localStorage中的token
  const token = window.localStorage.getItem('token')
  if (token) {
    $http.defaults.headers.common['Authorization'] = token
  }
  
  // 可选：添加请求拦截器，适配登录后token刷新的场景
  $http.onRequest(config => {
    const latestToken = window.localStorage.getItem('token')
    if (latestToken) {
      config.headers.common['Authorization'] = latestToken
    }
    return config
  })
}

配置完成后，你可以在组件、Vuex、asyncData等所有上下文里直接用this.$http（未配置alias则用this.$axios）调用axios，所有客户端发起的请求都会自动带上localStorage中存储的token。

内容的提问来源于stack exchange，提问作者P R 3 A C H 3 R