vue的封装axios获取token

在 Vue 中，可以将 Axios 封装成一个插件，方便在多个组件中使用。下面是一个封装 Axios 并获取 token 的示例：

1. 创建一个 axios.js 文件

在 src 目录下创建一个 axios.js 文件，用于封装 Axios。

import axios from "axios";

const instance = axios.create({
  baseURL: "http://your-api-url.com",
  timeout: 10000
});

// 请求拦截器
instance.interceptors.request.use(
  function(config) {
    // 在请求发送之前做一些处理，比如加入 token
    const token = localStorage.getItem("token");
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

export default instance;

2. 创建一个 axios 插件

在 plugins 目录下创建一个 axios.js 文件，用于将 Axios 注册为 Vue 插件。

import axios from "@/axios";

const AxiosPlugin = {
  install(Vue) {
    Vue.prototype.$http = axios;
  }
};

export default AxiosPlugin;

3. 在 main.js 中注册插件

在 main.js 中引入并注册 Axios 插件。

import AxiosPlugin from "@/plugins/axios";

Vue.use(AxiosPlugin);

现在，在 Vue 组件中可以直接使用 this.$http 发送请求，并且会自动带上 token。例如：

methods: {
  async getUserInfo() {
    try {
      const response = await this.$http.get("/user/info");
      console.log(response.data);
    } catch (error) {
      console.log(error);
    }
  }
}