1.在src/utils下新建request.js
    2.request.js代码如下

    1. import { notification} from 'antd';
    4. import { getAccessToken, getRefreshToken, getTokenExpireTime, clearToken} from '@/utils/authority';
    5. /**请求拦截 */
    6. // 更换令牌的时间区间
    7. const checkRegion = 5 * 60 * 1000;
    8.  export const requestInterceptors= (url, options) => {
    10.   const headers = options.headers ? options.headers : [];
    12.   if (headers['Authorization'] === '' || headers['Authorization'] == null) {
    14.     const expireTime = getTokenExpireTime();
    15.     if (expireTime) {
    16.       const left = Number(expireTime) - new Date().getTime();
    17.       const refreshToken = getRefreshToken();
    18.       if (left < checkRegion && refreshToken) {
    19.         if (left < 0) {
    20.           clearToken();
    21.         }
    22.       } else {
    23.         const accessToken = getAccessToken();
    24.         // console.log("accessToken:",accessToken);
    25.         if (accessToken) {
    26.           headers['Authorization'] = `Bearer ${accessToken}`;
    27.         }
    28.       }
    29.     }
    30.   }
    31.   // console.log(headers)
    32.   return {
    33.     url,
    34.     options: { ...options, headers },
    35.   };
    36. }
    38. // 响应拦截
    39. export const responseInterceptors= async (response) => {
    41.   if (!response) {
    42.     notification.error({
    43.       description: '您的网络发生异常，无法连接服务器',
    44.       message: '网络异常',
    45.     });
    46.     return;
    47.   }
    50.   const code = response.code;
    51.   if (code === 401 || code === 403) {
    52.     localStorage.removeItem('access_token');
    53.     window.location.href = '/user/login';
    54.   }
    56.   return response;
    57. }
    59. const codeMessage = {
    60.   200: '服务器成功返回请求的数据。',
    61.   201: '新建或修改数据成功。',
    62.   202: '一个请求已经进入后台排队（异步任务）。',
    63.   204: '删除数据成功。',
    64.   400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
    65.   401: '用户没有权限（令牌、用户名、密码错误）。',
    66.   403: '用户得到授权，但是访问是被禁止的。',
    67.   404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
    68.   405: '请求方法不被允许。',
    69.   406: '请求的格式不可得。',
    70.   410: '请求的资源被永久删除，且不会再得到的。',
    71.   422: '当创建一个对象时，发生一个验证错误。',
    72.   500: '服务器发生错误，请检查服务器。',
    73.   502: '网关错误。',
    74.   503: '服务不可用，服务器暂时过载或维护。',
    75.   504: '网关超时。',
    76. };
    78. /**
    79.  * 异常处理程序
    80.  */
    81.  export const errorHandler = (error) => {
    83.   const { response } = error;
    84.   if (response && response.status) {
    85.     const errorText = codeMessage[response.status] || response.statusText;
    86.     const { status, url } = response;
    88.     notification.error({
    89.       message: `请求错误 ${status}: ${url}`,
    90.       description: errorText,
    91.     });
    92.   }
    94.   if (!response) {
    95.     notification.error({
    96.       description: '您的网络发生异常，无法连接服务器',
    97.       message: '网络异常',
    98.     });
    99.   }
    100.   throw error;
    101. };

    3.代码的主要逻辑就是在请求前进行拦截，判断在header中是否有Authorization，如果没有且未过期，按照jwt格式Bearer+token方式设置headers[‘Authorization’]=Bearer+token。
    4.请求前拦截：requestInterceptors及响应后拦截：responseInterceptors参见antd pro v5官网文档
    https://pro.ant.design/zh-CN/docs/request/