【Nuxt3学习】6. 集成 axiosNuxt3 + Windi CSS + iconify + element-pl

介绍

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

www.axios-http.cn/

Nuxt

Introduction - Axios Module (nuxtjs.org)

特性

从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF

安装

pnpm add axios

使用

修改nuxt.config.ts文件如下：

···
// modules
  modules: [["@nuxtjs/axios", { proxyHeaders: false }]],
  // publicRuntimeConfig
  publicRuntimeConfig: {
    axios: {
      baseURL:
        process.env.NODE_ENV === "production"
          ? "/api"
          : "http://localhost:3000/api",
    },
  },
  // build modules
  buildModules: [
    "nuxt-windicss",
    "@pinia/nuxt",
    "@vueuse/nuxt",
    "@nuxtjs/axios",
  ],
···

增加plugins/axios.ts文件，内容如下：

import { ElMessage, ElNotification } from "element-plus";

export default function ({ store, redirect, req, router, app: { $axios } }) {
  if (process.server) {
    var token = getCookie.getcookiesInServer(req).token;
  }
  if (process.client) {
    var token = getCookie.getcookiesInClient("token");
  }
  // request
  $axios.onRequest((config) => {
    if (process.client) {
      //   NProgress.start();
    }
    config.headers.common["Authorization"] = token;
  });
  // response拦截器
  $axios.interceptors.response.use(
    (response) => {
      if (process.client) {
        // NProgress.done();
      }
      // return response
      if (response.data.code == 401) {
        // 返回401，token验证失败，清除客户端cookie
        // Cookie.remove("token");
        // 重定向到登录页面， 这里做一个判断，容错：req.url 未定义
        if (req.url) {
          //   redirect("/sign?ref=" + req.url);
        } else {
          //   redirect("/sign");
        }
      } else if (response.data.code == 404) {
        redirect("/404");
      } else {
        return response;
      }
    },
    (error) => {
      if (process.client) {
        // NProgress.done();
      }
      if (error.response.status == 500) {
        // redirect("/500.htm");
        ElMessage.error(error.response.msg);
      }
      if (error.response.status == 404) {
        redirect("/404");
      }
      return Promise.reject(error.response);
    }
  );
}