什么是 token 无感刷新？为什么需要 token 无感刷新？让我们想象一下有这么个场景：你登录一个系统成功后，玩了 10 分钟，发现登录失效了，又要你重新登录，然后又过 10 分钟，又失效了，又要重新登录，难不难受，那这是怎么造成的？是因为权限 token 有效时间很短造成的，不要问，为什么权限 token 过期时间这么短，因为需要实现单点登录。那什么是单点登录呢？请参考单点登录模式。
在单点登录模式下，服务器在我们登录成功后发了两个 token 给我们，一个有效时间短的权限 token（有效时间 10 分钟），一个有效时间长的刷新token（有效时间一个月）。那这个刷新 token有啥用呢，当权限token过期后，我们可以拿刷新token再去换一个新的权限token。
现在，我们需要实现的是 token 的无感刷新，那什么是 token 的无感刷新呢，就是在权限token失效后，自动拿刷新token去换新的权限 token，拿到新的权限token后继续访问系统受保护资源。不需要用户做任何操作，完全无感。
1. 接口封装
在 refreshtoken.js 中封装刷新 token 接口。
为什么需要定义 promise，因为当权限 token 失效时，但这期间同时访问了很多需要权限 token 的接口，不可能每个接口都去调用刷新接口，如果已经在调用刷新接口了，那么就赋值给 promise，在结果没返回前，再次调用刷新接口，直接就返回 promise。
为什么需要定义 __isRefreshToken 呢，因为如果刷新 token 也不存在，那么在调用刷新接口时，就会陷入死循环，需要判断当前需要权限的接口是不是刷新接口。
// refreshtoken.js import request from "./request.js"; import { getRefreshToken } from "./token.js"; let promise = null; export const refreshToken = () => { if (promise) { return promise; } promise = new Promise(async (resolve) => { const resq = await request.get("/refresh_token", { headers: { Authorization: `Bearer ${getRefreshToken()}`, }, __isRefreshToken: true, }); resolve(resq.code === 0); }); promise.finally(() => { promise = null; }); return promise; }; export const isRefreshRequest = (config) => { return !!config.__isRefreshToken; };
2. 封装 axios 请求
在 request.js 中封装 axios 请求
响应拦截中，后端返回的两个 token，我们都拿着保存着。当响应报 401 时，我们需要判断是不是调用刷新接口报的 401，如果不判断，就会一直在刷新接口这陷入死循环。刷新接口调用成功后，返回新 token，拿到新 token，赋值给 header，继续之前的请求。如果调用刷新接口失败，直接重新登录去。
// request.js import axios from "axios"; import { setToken, setRefreshToken, getToken } from "./token.js"; import { refreshToken, isRefreshRequest } from "./refreshtoken.js"; const service = axios.create({ baseURL: "http://localhost:8080", headers: { Authorization: `Bearer ${getToken()}`, }, }); // 响应拦截器 service.interceptors.response.use(async (res) => { if (res.headers.authorization) { const token = res.headers.authorization.replace("Bearer ", ""); setToken(token); service.default.headers.Authorization = `Bearer ${getToken()}`; } if (res.headers.refreshtoken) { const refreshtoken = res.headers.refreshtoken.replace("Bearer ", ""); setRefreshToken(refreshtoken); } if (res.data.code == 401 && !isRefreshRequest(res.config)) { const isSuccess = await refreshToken(); if (isSuccess) { res.config.headers.Authorization = `Bearer ${getToken()}`; const resp = await service.request(res.config); return resp; } else { // 到登录页 return res.data; } } return res.data; }); export default service;
总结：核心代码就这些，小伙伴可以根据这些代码去继续优化到自己的项目里
