JWT下无感刷新token

实现目标

• 在access_token失效时自动根据refresh_token获取新的access_token
• 自动缓存在刷新access_token时发送的请求，并在获取到access_token后继续/重新请求
• 避免重复刷新
• 在access_token和refresh_token同时失效时终止所有操作

代码实现

参考于：[axios无感知刷新token-卑微幻想家’s Blog]

相较于原文：

• 单个文件完整
• 使用TypeScript
• 在access_token和refresh_token同时失效时终止所有操作

注意

• axiosInstance对象的实例化需要按照真实情况填写
• login函数需要根据真实情况修改

// auth.ts
import axios from 'axios'
let isRefreshing = false // 是否正在刷新token

// 失效后同时发送请求的容器 -- 缓存接口
let callbacks: Function[] = []
function onAccessTokenFetched(newToken: String) {
    callbacks.forEach((callback) => {
        callback(newToken)
    })
    // 清空缓存接口
    callbacks = []
}
// 添加缓存接口
function addCallbacks(callback: Function) {
    callbacks.push(callback)
}

// 实例化axios对象
// 在这里修改你的BaseURL
const axiosInstance = axios.create({
    baseURL: '/api', 
    headers: {
        'Content-Type': 'application/json'
    }
})

// 请求拦截器，用于添加请求头
axiosInstance.interceptors.request.use((config) => {
    const token = localStorage.getItem('access_token')
    if (token) {
        config.headers.Authorization = `Bearer ${token}`
    }
    return config
})

// 响应拦截器
axiosInstance.interceptors.response.use(
    (response) => {
        return response
    },
    (error) => {
        /**
         * 将未授权接口缓存起来。retryOriginalRequest 这个 Promise 函数很关键，它一直处于等待状态。
         * 只有当token刷新成功后，onAccessTokenFetched 这个函数执行了回调函数，返回了 resolve 状态
         * 
         * 其中对于error.config.url的判断是不包含上文设置的baseURL的
         */
        if (
            (error.response.status.toString() === '401' ||
                error.response.status.toString() === '403') &&
            !(error.config.url === 'token/') &&
            !(error.config.url === 'token/refresh/')
        ) {
            // 获取当前的请求
            const config = error.response.config
            // 刷新token的promise
            const retryOriginalRequest = new Promise((resolve) => {
                addCallbacks((newToken: String) => {
                    // 表示用新的token去替换掉原来的token
                    config.headers.Authorization = `Bearer ${newToken}`
                    resolve(axiosInstance.request(config)) // 调用resolve请求队列里面接口
                })
            })
            // 无感刷新Token
            if (!isRefreshing) {
                isRefreshing = true
                axiosInstance
                    .post('/token/refresh/', { refresh: getRefreshToken() })
                    .then((response) => {
                        // 用refreshToken获取新的token
                        const accessToken = response.data.access
                        setAccessToken(accessToken)
                        onAccessTokenFetched(accessToken)
                    })
                    .catch(() => {
                        // 刷新token错误跳转到登陆页面
                        removeToken()
                        alert('登录无效/过期，请重新登录')
                        location.href = window.location.origin
                    })
                    .finally(() => {
                        isRefreshing = false
                    })
            }
            return retryOriginalRequest // 将token过期期间请求的接口包装成promise返回，等待刷新token后重新请求
        } else {
            return Promise.reject(new Error(error.message || 'Error'))
        }
    }
)

function setRefreshToken(token: string) {
    localStorage.setItem('refresh_token', token)
}

function setAccessToken(token: string) {
    localStorage.setItem('access_token', token)
}

function getRefreshToken() {
    return localStorage.getItem('refresh_token') || ''
}

function removeToken() {
    localStorage.removeItem('access_token')
    localStorage.removeItem('refresh_token')
}

async function loginByPassword(username: string, password: string): Promise<boolean> {
    try {
        const response = await axiosInstance.post('token/', {
            username: username,
            password: password
        })
        if (response.status === 200) {
            setAccessToken(response.data.access)
            setRefreshToken(response.data.refresh)
            return true
        }
        return false
    } catch (error) {
        console.error(`Error occurred while logging in: ${error}`)
        return false
    }
}

export {
    axiosInstance,
    loginByPassword,
    setRefreshToken,
    setAccessToken,
    getRefreshToken,
    removeToken,
}