无感刷新 token

前景提要：

• ts 简易封装 axios，统一 API

• 实现在 config 中配置开关拦截器

• axios 实现请求 loading 效果

背景

无感刷新 token 一般指的是使用 refresh token 无感刷新 access token。

基本思路

设置全局请求拦截器，从 localstorage 或其他地方获取 token 放在请求头中携带。在响应拦截器中，判断响应结果中是否有 token，有就存下来放在 localstorage 或其他地方。

一句话总结就是本地有就带，响应有就存。

实现自动刷新，就是在响应拦截之前的基础上再加一个判断，如果 access token 过期了，就携带 refresh token 去请求认证中心的接口。拿到新的 access token 后，再次对业务接口发起请求。

• 注意别忘了要让新业务请求携带最新的 access token。

在axios拦截器中重新发起请求，就是拿到业务请求的 config，用axios实例发起请求。所以也可以说，一个请求的本质就是它的config配置对象。

src\api\http\token.ts

import { AxiosResponse, InternalAxiosRequestConfig } from "axios";
import httpRequest from "..";
import { refreshAccessToken } from "../modules/refreshToken";export const ACCESS_TOKEN_KEY = "access_token";
export const REFRESH_TOKEN_KEY = "refresh_token";
export const UNAUTHORIZED_STATUS_CODE = 401;// token 工具函数/*** 获取token* @param key token的key* @returns {string}accessToken*/
export function getToken(key: string) {return localStorage.getItem(key);
}/*** 存储token到本地* @param key token的key* @param token token的值*/
export function setToken(key: string, token: string) {localStorage.setItem(key, token);
}// 拦截器/*** 请求拦截器：只要本地有access token，所有请求的请求头就携带上它。(对于没有采用单点登录方案的系统，access token就是普通 token)* @param {InternalAxiosRequestConfig}config* @returns {InternalAxiosRequestConfig}config*/
export function setAccessTokenRequestInterceptor(config: InternalAxiosRequestConfig) {if (config.headers) config.headers.authorization = `Bearer ${getToken("accessToken")}`;return config;
}/*** 响应拦截器：只要服务器响应了 token，就保存下来到本地，无论是 access token 还是 refresh token。* 当接口因权限拒绝或者本地计算 access token 过期，则就去拿 refresh token 无感刷新 access token。* @param {AxiosResponse}res* @returns {AxiosResponse}res*/
export async function getTokenResponseInterceptor(res: AxiosResponse) {// 假设服务器将token放在响应头中返回// 保存授权 token，也就是 access token 或者普通的 tokenif (res.headers.authorization) {const token = res.headers.authorization.repalce("Bearer ", "");setToken(ACCESS_TOKEN_KEY, token);}// 保存 refresh tokenif (res.headers.refreshtoken) {const refreshToken = res.headers.refreshtoken.repalce("Bearer ", "");setToken(REFRESH_TOKEN_KEY, refreshToken);}// 请求业务接口没有权限，说明 access token 过期，需要刷新 tokenif (res.data.code === UNAUTHORIZED_STATUS_CODE) {// 请求服务器获取最新access token，当前拦截器递归保存tokenconst isRefreshSuccess = await refreshAccessToken();if (isRefreshSuccess) {// 刷新 access token 成功，装配新 access token 后拿到 axios 实例重新发起请求res.config.headers.Authorization = `Bearer ${getToken(ACCESS_TOKEN_KEY)}`;const response = await httpRequest.getInstance().request(res.config);return response;} else {// 刷新失败，refresh token 过期，跳转登录页面重新登录window.location.hash = "/login";// window.location.href = "/login";}}return res;
}

src\api\modules\refreshToken.ts

import httpRequest from "..";
import { REFRESH_TOKEN_KEY, UNAUTHORIZED_STATUS_CODE, getToken } from "../http/token";const REFRESH_TOKEN_API = "/refreshToken";/*** 获取 refresh token 的接口* 这个接口不同于业务接口，它携带的 token 是 refresh token 而不是 access token。* 当请求 access token 回来后，就会启动响应拦截将 access token 保存* 返回一个布尔值，用于判断是否刷新成功，因为 refresh token 也会过期，导致刷新失败。* @returns {boolean} isRefreshSuccess 刷新 access token 是否成功。*/
export async function refreshAccessToken() {const res = await httpRequest.get({url: REFRESH_TOKEN_API,headers: {Authorization: `Bearer ${getToken(REFRESH_TOKEN_KEY)}`}});// 响应状态码不为 401，则表示刷新成功return res.code !== UNAUTHORIZED_STATUS_CODE;
}

需解决的问题

请求进入死循环

假如 refresh token 也过期了，那么携带 refresh token 去刷新 access token时就会被拒绝，refreshAccessToken 请求失败，状态码 401。这时因为是 401，响应拦截器中就又会以为是 access token 过期，又拿着 refresh token 去刷新。至此陷入死循环了。

核心就是当前是否启动无感刷新 access token 的判断条件，需要区分是 access token 过期导致的业务接口拒绝，还是 refresh token 过期导致的授权接口拒绝。

解决办法可以是服务器接口给出过期时间，或者前端自己解析 jwt，拿到过期时间。然后通过判断 access token 过期时间来选择是否要去刷新。

假如通过接口返回 401 来判断。这时可以引入一个变量做标志，表明当前请求是否是刷新 access token 的请求，还是业务请求。
src\api\modules\refreshToken.ts

export async function refreshAccessToken() {const res = await httpRequest.get({url: REFRESH_TOKEN_API,headers: {Authorization: `Bearer ${getToken(REFRESH_TOKEN_KEY)}`,_isRefreshAccessTokenRequest: true // 标记当前请求为刷新 token 请求}});return res.code !== UNAUTHORIZED_STATUS_CODE;
}

src\api\http\token.ts

// 请求业务接口没有权限，说明 access token 过期，需要刷新 token
if (res.data.code === UNAUTHORIZED_STATUS_CODE && !res.config.headers._isRefreshAccessTokenRequest) {// 请求服务器获取最新access token，当前拦截器递归保存tokenconst isRefreshSuccess = await refreshAccessToken();if (isRefreshSuccess) {// 刷新 access token 成功，装配新 access token 后拿到 axios 实例重新发起请求res.config.headers.Authorization = `Bearer ${getToken(ACCESS_TOKEN_KEY)}`;const response = await httpRequest.getInstance().request(res.config);return response;} else {// 刷新失败，refresh token 过期，跳转登录页面重新登录window.location.hash = "/login";// window.location.href = "/login";}
}

标记刷新 token 请求避免请求拦截覆盖 refresh token

刷新 access token 的请求也是一个请求，它携带的是 refresh token。但是之前我们设置了全局的请求拦截器。又因为无论是 access token 还是 refresh token 都是放在请求头的 authorization 上携带，此时请求拦截设置的 access token 就会覆盖掉 refresh token，导致刷新接口拿不到 refresh token。
因此请求拦截器也要对刷新 token 的请求做额外的区分，过滤掉刷新请求。也可以通过请求头的标记实现。

export function setAccessTokenRequestInterceptor(config: InternalAxiosRequestConfig) {if (config.headers && !config.headers._isRefreshAccessTokenRequest) {config.headers.authorization = `Bearer ${getToken(ACCESS_TOKEN_KEY)}`;}return config;
}

并发刷新 token

如果当前有很多业务请求，然后 access token 刚好过期了。那这些业务请求的响应拦截器中都会拿着 refresh token 去请求刷新接口刷新 access token。前一个刷新请求还没拿到最新的 access token，后一个刷新请求又发出了，这就出现了并发刷新 token ，冗余发送请求的情况。

解决这个问题的核心，无非就是确定上一个刷新 token 的请求是否结束，它没结束后续的刷新请求就得等着。这种观测异步处理的状态，promise 干的就是这个。

定义一个全局的变量，用这个全局的变量保存刷新 token 的请求，也就是保存一个 promise。
变量初始是空的，因为没有刷新请求。当有刷新请求发起，就生成一个 promise 观测该请求，并将该 promise 保存在全局变量中。此时后续想要再次发起刷新请求，就直接返回这个“全局的请求”（promise）给它们，避免了发起冗余请求。并且这样当第一个刷新请求得到结果，后续所有请求就都拿到了结果，因为都是同一个 promise。
promise 有结果后，无论刷新成功与否，都代表了本轮并发刷新 token 请求的结束，需将全局变量重置为 null，以准备下一次并发刷新请求。

import httpRequest from "..";
import { REFRESH_TOKEN_KEY, UNAUTHORIZED_STATUS_CODE, getToken } from "../http/token";const REFRESH_TOKEN_API = "/refreshtoken";let promise: Promise<any> | null = null;/*** 获取 refresh token 的接口* 这个接口不同于业务接口，它携带的 token 是 refresh token 而不是 access token。* 当请求 access token 回来后，就会启动响应拦截将 access token 保存* 返回一个 Promise 布尔值，用于判断是否刷新成功，因为 refresh token 也会过期，导致刷新失败。* @returns {Promise<boolean>} isRefreshSuccess 刷新 access token 是否成功。*/
export function refreshAccessToken() {// 前面已经发送了刷新请求，promise 有值，此时后续请求全都返回最开始的 promiseif (promise) {return promise;}promise = new Promise((resolve, rejects) => {httpRequest.get({url: REFRESH_TOKEN_API,headers: {Authorization: `Bearer ${getToken(REFRESH_TOKEN_KEY)}`,_isRefreshAccessTokenRequest: true}}).then(res => {resolve(res.code !== UNAUTHORIZED_STATUS_CODE);}).catch(() => rejects(false)).finally(() => {promise = null; // 本次并发刷新请求结束，重置变量为 null});});return promise;
}

完整代码

src\api\http\token.ts

import { AxiosResponse, InternalAxiosRequestConfig } from "axios";
import httpRequest from "..";
import { refreshAccessToken } from "../modules/refreshToken";export const ACCESS_TOKEN_KEY = "access_token";
export const REFRESH_TOKEN_KEY = "refresh_token";
export const UNAUTHORIZED_STATUS_CODE = 401;// token 工具函数/*** 获取token* @param key token的key* @returns {string}accessToken*/
export function getToken(key: string) {return localStorage.getItem(key);
}/*** 存储token到本地* @param key token的key* @param token token的值*/
export function setToken(key: string, token: string) {localStorage.setItem(key, token);
}// 拦截器/*** 请求拦截器：只要本地有access token，所有请求的请求头就携带上它。(对于没有采用单点登录方案的系统，access token就是普通 token)* @param {InternalAxiosRequestConfig}config* @returns {InternalAxiosRequestConfig}config*/
export function setAccessTokenRequestInterceptor(config: InternalAxiosRequestConfig) {if (config.headers && !config.headers._isRefreshAccessTokenRequest) {config.headers.authorization = `Bearer ${getToken(ACCESS_TOKEN_KEY)}`;}return config;
}/*** 响应拦截器：只要服务器响应了 token，就保存下来到本地，无论是 access token 还是 refresh token。* 当接口因权限拒绝或者本地计算 access token 过期，则就去拿 refresh token 无感刷新 access token。* @param {AxiosResponse}res* @returns {AxiosResponse}res*/
export async function getTokenResponseInterceptor(res: AxiosResponse) {// 假设服务器将token放在响应体中返回// 保存授权 token，也就是 access token 或者普通的 tokenif (res.data.data?.accessToken) {const token = res.data.data.accessToken.replace("Bearer ", "");setToken(ACCESS_TOKEN_KEY, token);}// 保存 refresh tokenif (res.data.data?.refreshToken) {const refreshToken = res.data.data.refreshToken.replace("Bearer ", "");setToken(REFRESH_TOKEN_KEY, refreshToken);}// 请求业务接口没有权限，说明 access token 过期，需要刷新 tokenif (res.data.code === UNAUTHORIZED_STATUS_CODE && !res.config.headers._isRefreshAccessTokenRequest) {// 请求服务器获取最新access token，当前拦截器递归保存tokenconst isRefreshSuccess = await refreshAccessToken();if (isRefreshSuccess) {// 刷新 access token 成功，装配新 access token 后拿到 axios 实例重新发起请求res.config.headers.Authorization = `Bearer ${getToken(ACCESS_TOKEN_KEY)}`;const response = await httpRequest.getInstance().request(res.config);return response;} else {// 刷新失败，refresh token 过期，跳转登录页面重新登录window.location.hash = "/login";// window.location.href = "/login";}}return res;
}

src\api\modules\refreshToken.ts

import httpRequest from "..";
import { REFRESH_TOKEN_KEY, UNAUTHORIZED_STATUS_CODE, getToken } from "../http/token";const REFRESH_TOKEN_API = "/refreshtoken";let promise: Promise<any> | null = null;/*** 获取 refresh token 的接口* 这个接口不同于业务接口，它携带的 token 是 refresh token 而不是 access token。* 当请求 access token 回来后，就会启动响应拦截将 access token 保存* 返回一个 Promise 布尔值，用于判断是否刷新成功，因为 refresh token 也会过期，导致刷新失败。* @returns {Promise<boolean>} isRefreshSuccess 刷新 access token 是否成功。*/
export function refreshAccessToken() {// 前面已经发送了刷新请求，promise 有值，此时后续请求全都返回最开始的 promiseif (promise) {return promise;}promise = new Promise((resolve, rejects) => {httpRequest.get({url: REFRESH_TOKEN_API,headers: {Authorization: `Bearer ${getToken(REFRESH_TOKEN_KEY)}`,_isRefreshAccessTokenRequest: true}}).then(res => {resolve(res.code !== UNAUTHORIZED_STATUS_CODE);}).catch(() => rejects(false)).finally(() => {promise = null; // 本次并发刷新请求结束，重置变量为 null});});return promise;
}

测试代码

<template><div><h2>测试无感刷新 token</h2><el-button type="primary" round @click="handleClickLogin">登录</el-button><el-button type="primary" round @click="handleClickGetProtectData">请求受保护资源</el-button></div>
</template><script setup lang="ts">import { login } from "@/api/modules/login";import { fetchUsersList } from "@/api/modules/user";const handleClickLogin = () => {login({ username: "admin" }).then(res => {console.log(res);});};const handleClickGetProtectData = async () => {const res = await fetchUsersList();console.log("res", res);};
</script><style scoped></style>

注意：拦截器注册顺序

注册无感刷新的响应拦截器要在防抖拦截器的后面。
如这样：

// debounceRequest
httpRequest.getInstance().interceptors.request.use(compareUrl);
httpRequest.getInstance().interceptors.response.use(filterFulfilledUrl);// token
httpRequest.getInstance().interceptors.request.use(setAccessTokenRequestInterceptor);
httpRequest.getInstance().interceptors.response.use(getTokenResponseInterceptor);

请求防抖是通过比较请求 url 来实现的。在请求拦截器中保存当前请求的url到数组中，后续的请求都需要判断一下，当前请求的url是否已经在数组中。当响应拦截器启动，说明请求完毕，就从数组中清除此url。

此时问题就来了，假如 token 的响应拦截定义在防抖响应拦截器的前面。（axios响应拦截，越晚定义越晚执行）
当 access token 过期，token 响应拦截器中会去刷新 token，并对业务接口重新发起请求。注意，此时仍然处于上一次被拒绝请求的拦截器中。那后续的防抖响应拦截器肯定还没执行，也就是还没有清除数组中被拒绝请求的url。此时又重新发送了请求，防抖的请求拦截中就会发挥防抖功能抛出错误“请求频繁"。
因此防抖响应拦截器和无感刷新 token 的响应拦截器有注册顺序，token 拦截要后注册。

另一种方案：事件驱动刷新

这种方式以某个页面事件触发刷新，而不是在拦截器中判断所有请求的结果。

用户登陆返回accesToken，refreshToken 还有accesToken有效时间戳。
每次加载到home页面，直接判断accesToken是否过期，过期了直接用refreshToken请求刷新accesToken接口，返回新的accesToken，新的refreshToken，accesToken的有效时间戳。

accesToken的有效时间戳并不是accesToken真正失效时间，一般会比真的失效时间点会提前的。

至于其他request和这套机制完全独立的。只是每次请求带上accessToken罢了。不用考虑accesToken过期啥的。