前端React中无感刷新token

React + umi-request 刷新token

起因：项目之前在token到期之后直接跳转到登录页，现在客户不想跳转到登录页重新登录

1、直接上代码，自定义一个request

import { refreshToken } from '@/utils/auth';
import { getCache } from '@/utils/utils';
import { history } from 'umi';
import { extend } from 'umi-request';

const loginPath = '/user/login';

const codeMessage = {
    200: '服务器成功返回请求的数据。',
    201: '新建或修改数据成功。',
    202: '一个请求已经进入后台排队（异步任务）。',
    204: '删除数据成功。',
    400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
    401: '用户没有权限（令牌、用户名、密码错误）。',
    403: '用户得到授权，但是访问是被禁止的。',
    404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
    405: '请求方法不被允许。',
    406: '请求的格式不可得。',
    410: '请求的资源被永久删除，且不会再得到的。',
    422: '当创建一个对象时，发生一个验证错误。',
    500: '服务器发生错误，请检查服务器。',
    502: '网关错误。',
    503: '服务不可用，服务器暂时过载或维护。',
    504: '网关超时。',
};

let isRefreshing = false; // 是否正在刷新token
let pendingList: any[] = []; // 等待的函数队列，用Promise实现

const customRequest = extend({
    credentials: 'include', // 默认请求是否带上cookie
});

/**
 * 请求拦截器
 */
customRequest.interceptors.request.use((url, options) =>{
    return {
        url,
        options: {
            ...options,
            headers: {
            	// 此处替换成自己的token
                Authorization: `bearer ${getCache('TOKEN')}`
            }
        }
    }
});

/**
 * 响应拦截器
 */
customRequest.interceptors.response.use(async (response, options) => {
    const { status } = response; 
    if(status === 401){
        if(!isRefreshing){
            isRefreshing = true;
            const newToken = await refreshToken(); // 获取新token
            if(newToken === ''){
                // 获取失败(RefreshToken已过期), 跳转到登录页
                pendingList = [];
                isRefreshing = false;
                history.push(loginPath);
            }else{
				pendingList.forEach(item =>item());
	            const res = await customRequest(response.url,options);
	            isRefreshing = false;
	             // 清空等待队列
	            pendingList = [];
	            return res;
			}
        }else{
            // 正在获取新token, 需要将本次请求加入到等待队列中
            return new Promise(resolve => {
				// 用函数形式将 resolve 存入，等待获取新token后再执行
                pendingList.push(() => {
					resolve(customRequest(response.url,options))
				});
			})
        }
    }
    return response;
});
export default customRequest;

refreshToken函数

/**
 * @description: 获取新token
 * @return {*}
 */
export const refreshToken = async (): Promise<string> =>{
	// 替换成自己的token和RefreshToken
    const token = getCache('TOKEN');
    const refreshToken = getCache('REFRESH_TOKEN');

    const response: ResponseResultType = await request(`替换成自己的刷新token的url`);
    if(response.Code === 200){
    	// 这里是后端自己定义的
        if(response.Msg === '未找到该刷新令牌' || response.Msg === '刷新令牌不正确'){
            return '';
        }
        const { data }: { data: RefreshTokenType} = response;
        setCache('TOKEN', data.AccessToken);
        setCache('REFRESH_TOKEN', data.RefreshToken); 
        return data.AccessToken;
    }
    return '';
}

2、后端使用的是.Net Core 6+Jwt，需要通过登录验证时生成的token和RefreshToken去获取新token