Nuxt Axios 中间件

中间件是 Nuxt.js 框架中的关键概念之一。它允许我们在渲染页面或路由之前执行一些异步操作，并且可以被用于处理请求和响应。Nuxt.js 默认提供了一个 Axios 中间件，让我们能够在服务器端和客户端使用 Axios 来发起 HTTP 请求。

Axios 是一个基于 Promise 的 HTTP 客户端，它可以用于浏览器和 Node.js。它提供了用于发送各种不同类型请求的方法，例如 GET、POST、PUT、DELETE 等。

安装

首先，使用以下命令安装 Axios 和 Nuxt Axios 中间件：

npm install axios @nuxtjs/axios

配置

在 Nuxt.js 项目的 nuxt.config.js 文件中，我们需要配置 Axios 模块，并为其指定一些全局选项：

// nuxt.config.js
export default {
  // ...
  modules: [
    '@nuxtjs/axios',
  ],

  axios: {
    // 全局配置
    baseURL: 'https://api.example.com', // 设置统一的 baseURL
    credentials: true, // 在请求中包含凭据

    // 拦截器
    interceptors: {
      request: (config) => {
        console.log('Making request to ' + config.url);
        return config;
      },
      response: (response) => {
        console.log('Received response for ' + response.config.url);
        return response;
      },
    },
  },
  // ...
}

使用

在 Nuxt.js 的页面、布局或组件中，我们可以直接使用 $axios 对象来发起请求。以下是一个示例：

// pages/index.vue
export default {
  async asyncData({ $axios }) {
    const response = await $axios.$get('/api/data');
    return {
      data: response,
    };
  },
};

在上面的示例中，我们在 asyncData 方法中使用 $axios 对象发起了一个 GET 请求，并返回其响应结果。

在 asyncData 和 fetch 方法中，$axios 对象是可用的。此外，您还可以在页面组件中使用 this.$axios 和在 Vuex 模块中使用 this.$axios，这两者是相同的。

Axios 中间件

Nuxt.js 的 Axios 模块还提供了一个中间件机制，这允许我们在请求被发送到服务器之前，或者在响应被发送到客户端之前，执行某些操作。

我们可以在 middleware 目录中创建一个 js 文件来定义 Axios 中间件。例如，我们可以创建一个 middleware/auth.js 文件来处理需要身份验证的请求：

// middleware/auth.js
export default function ({ $axios, redirect }) {
  if (!localStorage.getItem('token')) {
    // 如果 token 不存在则重定向到登录页
    redirect('/login');
  } else {
    $axios.setToken(localStorage.getItem('token'), 'Bearer');
  }
}

然后，我们在页面组件或指定路由的配置中使用该中间件：

// pages/dashboard.vue
export default {
  middleware: 'auth',
  // ...
};

在上面的示例中，如果用户没有登录（即 token 不存在），则用户将被重定向到登录页面；否则，我们将为请求设置身份验证的 token。

这只是一个简单的示例，您可以根据自己的需求在 Axios 中间件中执行任何操作。

总结

Nuxt Axios 中间件是 Nuxt.js 框架中的一个重要特性，它使得在服务器端和客户端进行 HTTP 请求变得更加容易。我们可以配置全局选项、使用 $axios 对象发起请求，并在中间件中执行各种操作。通过熟练使用 Nuxt Axios 中间件，我们能够更加高效地处理和管理 HTTP 请求。