无感刷新token

无感刷新

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

实现

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

后端

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

controller.ts

javascript 复制代码
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

前端请求封装

javascript 复制代码
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.accessToken
                    service.request(config)
                }
                requests.setIsRefresh(false)
            });
        }
    } else {
        // token请求没有过期
        return new Promise((resolve,reject)=>{
            reject(error)
        });
    }
});
export default service;
相关推荐
yngsqq2 分钟前
c#使用高版本8.0步骤
java·前端·c#
流星白龙5 分钟前
【C++习题】10.反转字符串中的单词 lll
开发语言·c++
尘浮生12 分钟前
Java项目实战II基于微信小程序的校运会管理系统(开发文档+数据库+源码)
java·开发语言·数据库·微信小程序·小程序·maven·intellij-idea
MessiGo13 分钟前
Python 爬虫 (1)基础 | 基础操作
开发语言·python
Tech Synapse18 分钟前
Java根据前端返回的字段名进行查询数据的方法
java·开发语言·后端
乌啼霜满天24927 分钟前
JDBC编程---Java
java·开发语言·sql
Myli_ing37 分钟前
考研倒计时-配色+1
前端·javascript·考研
色空大师39 分钟前
23种设计模式
java·开发语言·设计模式
余道各努力,千里自同风39 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave1 小时前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习