轻松封装Axios拦截器，巧妙刷新令牌，重发请求

2023-11-01 09:53:30

前言

在前端开发中，axios作为一款备受欢迎的http请求库，以其简洁易用、功能强大的特点，深受广大开发者的喜爱。然而，在实际项目中，我们常常需要根据项目的具体需求，对axios进行封装，以满足更加复杂的业务场景。

最近在公司做一个商城项目，也遇到了类似的情况。项目需求中，所有对服务器的请求都必须先访问/GetMaintenanceState接口，如果服务器正在维护，则需要拦截请求，跳转到维护页面并显示维护信息；如果服务器正常，则继续发送请求，获取数据。

面对这个需求，我陷入了思考，该如何巧妙地利用axios拦截器来实现这一功能呢？

步入正题

一、拦截器简介

axios拦截器是一个强大的功能，它允许我们在发送请求之前或之后对请求或响应进行拦截。这为我们提供了在请求生命周期中进行各种操作的机会，比如添加或修改请求头、重试请求、刷新令牌等等。

二、需求分析

需求的核心在于，我们需要在请求发送之前，判断服务器是否正在维护。如果正在维护，则拦截请求，跳转到维护页面；如果正常，则继续发送请求。

三、拦截器封装

根据需求分析，我们可以设计一个拦截器函数，如下所示：

function maintenanceInterceptor(config) {
  // 获取服务器维护状态
  const maintenanceState = getMaintenanceState();

  // 如果正在维护，则拦截请求，跳转到维护页面
  if (maintenanceState === 'maintenance') {
    window.location.href = '/maintenance.html';
    return Promise.reject(new Error('服务器正在维护'));
  }

  // 如果正常，则继续发送请求
  return config;
}

四、注册拦截器

封装好拦截器函数后，我们需要将其注册到axios实例中，以便在每次发送请求时自动触发拦截器。

axios.interceptors.request.use(maintenanceInterceptor);

五、刷新令牌并重发请求

在实际项目中，我们可能会遇到需要刷新令牌并重发请求的情况。这时，我们可以利用axios拦截器轻松实现这一功能。

function refreshTokenInterceptor(error) {
  // 获取错误信息
  const errorMessage = error.response.data.message;

  // 如果错误信息是"令牌已过期"，则刷新令牌并重发请求
  if (errorMessage === '令牌已过期') {
    // 刷新令牌
    const newToken = refreshToken();

    // 将新令牌添加到请求头中
    error.config.headers['Authorization'] = `Bearer ${newToken}`;

    // 重发请求
    return axios(error.config);
  }

  // 如果不是令牌已过期，则直接抛出错误
  return Promise.reject(error);
}

实践经验

在实际项目中，我将上述拦截器函数封装成一个名为axios-interceptor.js的JavaScript文件，并将其引入到项目中。在项目入口文件main.js中，我注册了维护状态拦截器和刷新令牌拦截器，如下所示：

import axios from 'axios';
import axiosInterceptor from './axios-interceptor';

axios.interceptors.request.use(axiosInterceptor.maintenanceInterceptor);
axios.interceptors.response.use(undefined, axiosInterceptor.refreshTokenInterceptor);