封装一个带Token校验的Axios请求工具类

当我们需要对 HTTP 请求进行权限校验时，可以在请求头中添加 Token 信息来验证用户的身份。下面是对之前封装的 Axios 工具类增加 Token 校验的方式：

// http.js

import axios from 'axios';

export default class Http {
  constructor(baseURL) {
    this.instance = axios.create({
      baseURL,
    });

    // 添加请求拦截器
    this.instance.interceptors.request.use(
      (config) => {
        // 在发送请求前做些什么
        const token = localStorage.getItem('token');
        if (token) {
          config.headers.Authorization = `Bearer ${token}`;
        }
        console.log('HTTP Request:', config);
        return config;
      },
      (error) => {
        // 对请求错误做些什么
        console.error('HTTP Request error:', error);
        return Promise.reject(error);
      },
    );

    // 添加响应拦截器
    this.instance.interceptors.response.use(
      (response) => {
        // 对响应数据做点什么
        console.log('HTTP Response:', response);
        return response.data;
      },
      (error) => {
        // 对响应错误做点什么
        console.error('HTTP Response error:', error);
        return Promise.reject(error);
      },
    );
  }

  async get(url, params) {
    const response = await this.instance.get(url, { params });
    return response;
  }

  async post(url, data) {
    const response = await this.instance.post(url, data);
    return response;
  }

  async put(url, data) {
    const response = await this.instance.put(url, data);
    return response;
  }

  async delete(url) {
    const response = await this.instance.delete(url);
    return response;
  }
}

在这个例子中，我们修改了请求拦截器的实现，在发送请求前从本地存储中获取 Token 并添加到请求头的 Authorization 字段中，以便服务端进行身份验证。如果本地存储中不存在 Token，则不会添加该字段。

在应用程序中使用这个工具类时，需要先登录以获取 Token 并保存到本地存储中。例如：

// login.js

import Http from './http';

const http = new Http('http://localhost:3000/api');

async function login(username, password) {
  try {
    const response = await http.post('/auth/login', { username, password });
    localStorage.setItem('token', response.token);
    return true;
  } catch (error) {
    console.error(error);
    return false;
  }
}

export default login;

在这个例子中，我们通过 http.post 方法向 /auth/login 路径发送一个 POST 请求来进行登录操作，并获取服务端返回的 Token，并将其保存到本地存储中。在后续的请求中，如果用户已登录，则会自动在请求头中添加 Token 信息以供服务端进行身份验证。