微信网站定制百度企业号

什么是 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;

总结：核心代码就这些，小伙伴可以根据这些代码去继续优化到自己的项目里。