如何在NuxtJS中设置全局$axios头

在NuxtJS中设置全局的 $axios 请求头是一种常见的需求，特别是在需要处理诸如认证令牌等在多个请求中持续传递的信息时。以下是如何在NuxtJS项目中全局配置axios的请求头的步骤：

步骤 1: 安装 @nuxtjs/axios 模块

首先，确保你的 NuxtJS 项目中已经安装了 @nuxtjs/axios 模块。如果未安装，可以使用下列命令安装：

bash
npm install @nuxtjs/axios

或者：

bash
yarn add @nuxtjs/axios

步骤 2: 在 nuxt.config.js 中配置 axios

在 nuxt.config.js 文件中，你需要注册 axios 模块，并可以设置一些基础配置：

javascript
export default {
  modules: [
    '@nuxtjs/axios',
  ],

  axios: {
    // API 的 baseURL
    baseURL: 'https://api.example.com',
  },
}

步骤 3: 设置全局请求头

接下来，你可以在 NuxtJS 项目中使用插件系统来设置全局请求头。创建一个插件文件，例如 plugins/axios.js，并在其中设置请求头：

javascript
export default function({ $axios }) {
  // 设置请求头
  $axios.onRequest(config => {
    config.headers.common['Authorization'] = `Bearer token_string_here`;
    config.headers.common['Content-Type'] = 'application/json';
    return config;
  });
}

步骤 4: 在 nuxt.config.js 中注册插件

最后，确保在 nuxt.config.js 中注册上面创建的插件：

javascript
export default {
  plugins: [
    '~/plugins/axios'
  ],
}

示例场景

假设你正在开发一个需要用户登录的应用，并且每个 API 请求都需要携带 JWT (JSON Web Tokens)。你可以在用户登录后存储 JWT，在每次请求时通过插件自动添加到请求头中。这样可以确保所有请求都是经过授权的。

结论

通过以上步骤，你可以在 NuxtJS 应用中全局设置 $axios 的请求头，这对于管理认证信息、内容类型等在多个请求中重复使用的信息非常有用。这种方法提高了代码的可维护性和可重用性，确保整个应用的 API 请求都符合预期的格式和认证要求。