无感刷新

无感刷新Token技术是一种用于实现持久登录体验的关键技术，它通过在用户登录后自动刷新Token，以延长用户的登录状态，避免频繁要求用户重新登录。

实现

使用access_token（短效token）和refresh_token（长效token），当请求拦截判断属于access_token过期时，使用refresh_token获取一组新的token，并且将所有无效请求入队列，等拿到有效token时依次出队列重新请求。

后端

使用nestjs写了几个测试用的接口

controller.ts

import { Body, Query, Controller,Request, Get, Post, BadRequestException, Inject, Req, UnauthorizedException } from '@nestjs/common';
import { AppService } from './app.service';
import { UserDto } from './dto/user.dto';
import { JwtService } from "@nestjs/jwt"
const users = [{ username:"admin", password:"admin" },{ username:"zhangsan", password:"123" },
]@Controller()
export class AppController {constructor(private readonly appService: AppService) {}@Inject(JwtService)private jwtService:JwtService;@Get()getHello(): string {return this.appService.getHello();}@Post('login')login(@Body() userDto : UserDto){const user = users.find(item => item.username === userDto.username);if(!user) {throw new BadRequestException('用户不存在');}if(user.password !== userDto.password) {throw new BadRequestException("密码错误");}const accessToken = this.jwtService.sign({username:user.username,}, {expiresIn: '0.001h'})const refreshToken =  this.jwtService.sign({username:user.username,}, {expiresIn: '7d'})return {userInfo: {username: user.username,},accessToken: accessToken,refreshToken: refreshToken};}@Get("aaa")aaa(@Req() req: Request){const authorization = req.headers['authorization'];if(!authorization){throw new UnauthorizedException("用户未登录")}try {const token = authorization;const data = this.jwtService.verify(token);console.log(data);return 'aaa'} catch (error) {throw new UnauthorizedException("token失效，请重新登录")}}@Get("bbb")bbb(@Req() req: Request){const authorization = req.headers['authorization'];if(!authorization){throw new UnauthorizedException("用户未登录")}try {const token = authorization;const data = this.jwtService.verify(token);console.log(data);return 'bbb'} catch (error) {throw new UnauthorizedException("token失效，请重新登录")}}@Get('refresh')refresh(@Query('token') token: string) {try{const data = this.jwtService.verify(token);const user = users.find(item => item.username === data.username);const accessToken = this.jwtService.sign({username: user.username,}, {expiresIn: '0.001h'});const refreshToken = this.jwtService.sign({username: user.username}, {expiresIn: '7d'})return {accessToken,refreshToken};} catch(e) {throw new UnauthorizedException('token 失效，请重新登录');}}}

其中login生成 access_token 和 refresh_token

前端请求封装

import axios from 'axios';
import { userStore } from "@/store/user.js"
const store = userStore();
class RequestQueue {constructor() {this.queue = [];this.isRefresh = false;}// 入队enqueue(value) {return this.queue.push(value);}// 出队dequeue() {return this.queue.shift();}// 取队头元素peek() {return this.queue[0];}// 判断队列是否为空isEmpty() {return this.queue.length === 0;}// 取队列有多少个元素size() {return this.queue.length;}// 清空队列clear() {this.queue = [];}setIsRefresh(isRefresh){return this.isRefresh = isRefresh}
}
//1. 创建axios对象
const service = axios.create({baseURL: import.meta.env.VITE_APP_BASE_API,// 超时timeout: 10000});
//2. 请求拦截器
service.interceptors.request.use(config => {console.log('store拦截信息',store)if(store.accessToken){config.headers.Authorization = store.accessToken;}return config;
}, error => {Promise.reject(error);
});let requests = new RequestQueue;  // 请求队列
//3. 响应拦截器
service.interceptors.response.use(response => {//判断code码return response.data;
},error => {if(error.response.status == 401){// token过期处理// 请求入队requests.enqueue(error.response.config);if(!requests.isRefresh){requests.setIsRefresh(true)store.doRefreshToken().then(res=>{while(!requests.isEmpty()){let config = requests.dequeue()config.Authorization = store.accessTokenservice.request(config)}requests.setIsRefresh(false)});}} else {// token请求没有过期return new Promise((resolve,reject)=>{reject(error)});}
});
export default service;