请求时token过期自动刷新token

博客介绍了token的作用,即保障用户请求合法性。当token失效时,网站有跳转登录页和自动请求新token两种处理方式。重点阐述了用axios请求时,页面多请求导致token失效的处理方法,利用Promise函数集合和设置刷新开关避免重复请求。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.在开发过程中,我们都会接触到token,token的作用是什么呢?主要的作用就是为了安全,用户登陆时,服务器会随机生成一个有时效性的token,用户的每一次请求都需要携带上token,证明其请求的合法性,服务器会验证token,只有通过验证才会返回请求结果。

2.当token失效时,现在的网站一般会做两种处理,一种是跳转到登陆页面让用户重新登陆获取新的token,另外一种就是当检测到请求失效时,网站自动去请求新的token,第二种方式在app保持登陆状态上面用得比较多。

3.下面进入主题,我们请求用的是axios,不管用何种请求方式,刷新token的原理都是一样的。

//封装了一个统一的请求函数,这个不是重点

export default function request(url, options) {
    const token = localStorage.getItem('token');
    const defaultOptions = {
        headers: {
            Authorization: `Bearer ${token}`,
        },
        withCredentials: true,
        url: url,
        baseURL: BASE_URL,
    };
    const newOptions = { ...options, ...defaultOptions };
    return axios.request(newOptions)
        .then(checkStatus)
        .catch(error => console.log(error));
}

// 封装了一个检测返回结果的函数,与后台返回状态码code === 1002表示token失效

let isRefreshing = true;
function checkStatus(response) {
  if (response && response.code === 1002) {
    // 刷新token的函数,这需要添加一个开关,防止重复请求
    if(isRefreshing){
        refreshTokenRequst()
    }
    isRefreshing = false;
    // 这个Promise函数很关键
      const retryOriginalRequest = new Promise((resolve) => {
                addSubscriber(()=> {
                    resolve(request(url, options))
                })
            });
            return retryOriginalRequest;
  }else{
      return response;
  }
}

// 刷新token的请求函数

function refreshTokenRequst(){
    let data;
    const refreshToken = localStorage.getItem('refreshToken');
    data:{
        authorization: 'YXBwYXBpczpaSWxhQUVJdsferTeweERmR1praHk=',
        refreshToken,
    }
    axios.request({
        baseURL: BASE_URL,
        url:'/app/renewal',
        method: 'POST',
        data,
    }).then((response)=>{
        localStorage.setItem('refreshToken',response.data.refreshToken);
        localStorage.setItem('token',response.data.token);
        onAccessTokenFetched();
        isRefreshing = true;
    });
}

// Promise函数集合

let subscribers = [];
function onAccessTokenFetched() {
    subscribers.forEach((callback)=>{
        callback();
    })
    subscribers = [];
}

function addSubscriber(callback) {
    subscribers.push(callback)
}

总结:其实token失效,自动刷新token,在页面只有一个请求的时候是比较好处理的,但是如果页面同时有多个请求,并且都会产生token失效,这就需要一些稍微复杂的处理,解决方式主要是用了Promise 函数来进行处理。每一个token失效的请求都会存到一个Promise函数集合里面,当刷新token的函数执行完毕后,才会批量执行这些Promise函数,返回请求结果。还有一点要注意一下,这儿设置一个刷新token的开关isRefreshing,这个是非常有必要的,防止重复请求。

<think>我们正在处理JWTToken过期自动刷新的问题。根据引用内容,我们可以总结出以下关键点:1.**JWT的exp字段**:表示Token过期间(引用[1])。2.**双Token机制**:使用AccessToken和RefreshToken(引用[2])。3.**自动刷新策略**:在检测到Token过期,使用RefreshToken获取新的AccessToken(引用[3]和[4])。###解决方案:Token过期自动刷新####1.双Token机制-**AccessToken**:用于业务请求,有效期较短(如2小)。-**RefreshToken**:用于刷新AccessToken,有效期较长(如7天),存储在安全的地方(如HttpOnlyCookie)。####2.刷新流程当AccessToken过期:1.客户端使用RefreshToken请求新的AccessToken(通过POST接口)。2.服务端验证RefreshToken的有效性:-有效:返回新的AccessToken(和可选的新的RefreshToken)。-无效:要求用户重新登录。####3.防止并发刷新当多个请求发现Token过期,应避免多次刷新。解决方案(引用[3]):-设置一个刷新状态标记(`isRefreshing`)和一个存储待处理请求的队列(Promise队列)。-第一个发现过期请求负责刷新Token,其他请求加入队列等待刷新完成。###代码实现示例####前端JavaScript)实现```javascriptletisRefreshing=false;//是否正在刷新TokenletrefreshSubscribers=[];//等待刷新请求队列//添加请求到队列functionsubscribeTokenRefresh(cb){refreshSubscribers.push(cb);}//刷新完成后执行队列中的请求functiononRefreshed(token){refreshSubscribers.map(cb=>cb(token));refreshSubscribers=[];}//刷新Token的函数asyncfunctionrefreshToken(){constrefreshToken=localStorage.getItem('refresh_token');constresponse=awaitfetch('/auth/refresh',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({refresh_token:refreshToken})});constdata=awaitresponse.json();localStorage.setItem('access_token',data.access_token);returndata.access_token;}//封装API请求asyncfunctionapiRequest(url,options){letaccessToken=localStorage.getItem('access_token');if(!accessToken)thrownewError('未登录');//检查Token是否过期(需要解析JWT的exp字段)consttokenExpired=isTokenExpired(accessToken);//实现此函数if(tokenExpired){if(!isRefreshing){isRefreshing=true;try{constnewToken=awaitrefreshToken();isRefreshing=false;onRefreshed(newToken);}catch(error){isRefreshing=false;throwerror;}}//将当前请求加入队列,等待刷新完成后重试returnnewPromise((resolve)=>{subscribeTokenRefresh((token)=>{//使用新Token重试原请求options.headers.Authorization=`Bearer${token}`;resolve(fetch(url,options));});});}else{//Token过期,正常请求options.headers={...options.headers,Authorization:`Bearer${accessToken}`};returnfetch(url,options);}}//检查Token是否过期functionisTokenExpired(token){constpayload=JSON.parse(atob(token.split('.')[1]));constexp=payload.exp*1000;//转为毫秒returnDate.now()>exp;}```####后端(Python)刷新接口示例```pythonfromflaskimportrequest,jsonifyimportjwtimportdatetime@app.route('/auth/refresh',methods=['POST'])defrefresh_token():refresh_token=request.json.get('refresh_token')#验证RefreshTokentry:payload=jwt.decode(refresh_token,SECRET_KEY,algorithms=['HS256'])#检查RefreshToken是否有效(未过期且未被撤销)#生成新的AccessTokennew_access_token=jwt.encode({'sub':payload['sub'],'exp':datetime.datetime.utcnow()+datetime.timedelta(hours=2)},SECRET_KEY)returnjsonify({'access_token':new_access_token})exceptjwt.ExpiredSignatureError:returnjsonify({'error':'refresh_token_expired'}),401exceptjwt.InvalidTokenError:returnjsonify({'error':'invalid_token'}),401```###关键点说明1.**Token过期检查**:前端解析JWT中的`exp`字段判断是否过期(引用[1])。2.**刷新并发控制**:通过`isRefreshing`和请求队列避免重复刷新(引用[3])。3.**刷新接口**:使用RefreshToken通过POST请求获取新Token(引用[2]和[4])。###安全建议-**HttpOnlyCookie**:存储RefreshToken以防止XSS攻击。-**刷新Token一次有效**:服务端刷新后使原RefreshToken失效(可选,增强安全性)。§§相关问题§§1.如何在前端安全地存储Token?2.双Token机制如何防止CSRF攻击?3.如何在后端实现Token的黑名单(用于立即失效)?4.JWTToken的签名验证原理是什么?5.单页应用(SPA)中Token刷新的最佳实践是什么?</think>### JWT Token过期自动刷新处理方案 #### 核心实现原理 1. **双Token机制**: - **Access Token**:短期有效(如2小),用于常规API请求 - **Refresh Token**:长期有效(如7天),用于刷新Access Token[^2] 2. **刷新流程**: - 当Access Token过期,使用Refresh Token请求Token - 服务端验证Refresh Token有效性后返回新Access Token - 自动重试原始请求 #### 前端实现方案(JavaScript) ```javascript let isRefreshing = false; // 刷新状态锁 let refreshQueue = []; // 等待队列 // 刷新Token函数 async function refreshToken() { if (isRefreshing) return new Promise(resolve => { refreshQueue.push(resolve); // 加入等待队列 }); isRefreshing = true; try { const response = await fetch('/auth/refresh', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({refresh_token: getRefreshToken()}) }); const { access_token } = await response.json(); saveNewToken(access_token); // 存储新Token isRefreshing = false; // 执行所有等待中的请求 refreshQueue.forEach(resolve => resolve(access_token)); refreshQueue = []; return access_token; } catch (error) { isRefreshing = false; logoutUser(); // 刷新失败则登出 throw error; } } // 封装API请求 async function secureFetch(url, options = {}) { let token = getAccessToken(); // 检查Token是否过期(解析JWT的exp字段) const payload = JSON.parse(atob(token.split('.')[1])); if (Date.now() >= payload.exp * 1000) { token = await refreshToken(); // 自动刷新 } // 添加Authorization头 const headers = { ...options.headers, Authorization: `Bearer ${token}` }; return fetch(url, {...options, headers}); } ``` #### 后端刷新接口实现(Python示例) ```python from flask import request, jsonify import jwt import datetime @app.route('/auth/refresh', methods=['POST']) def refresh_access_token(): refresh_token = request.json.get('refresh_token') try: # 验证refresh_token有效性 payload = jwt.decode(refresh_token, SECRET_KEY, algorithms=['HS256']) # 生成新access_token new_payload = { "sub": payload["sub"], "exp": datetime.datetime.utcnow() + datetime.timedelta(hours=2), "iat": datetime.datetime.utcnow() } new_token = jwt.encode(new_payload, SECRET_KEY, algorithm='HS256') return jsonify({ "access_token": new_token, "expires_in": 7200 # 2小有效期 }) except jwt.ExpiredSignatureError: return jsonify({"error": "refresh_token_expired"}), 401 except jwt.InvalidTokenError: return jsonify({"error": "invalid_token"}), 401 ``` #### 关键处理逻辑 1. **Token过期检测**: - 解析JWT的`exp`字段(过期间戳)[^1] - 比较当前间与过期间:`Date.now() >= payload.exp * 1000` 2. **并发请求处理**: - 使用`isRefreshing`标志防止重复刷新 - 请求队列(`refreshQueue`)存储等待请求 - 刷新完成后批量重试队列中的请求[^3] 3. **刷新接口安全**: - 验证Refresh Token签名有效性 - 检查Refresh Token是否在黑名单中 - 设置Refresh Token短有效期(建议7-30天) 4. **自动重试机制**: - 获取新Token后自动重试原始请求 - 支持最多3次重试(避免无限循环)[^4] #### 最佳实践建议 1. **Token存储安全**: - Access Token:内存或Session Storage - Refresh Token:HttpOnly Cookie或安全存储 2. **刷新频率控制**: ```javascript // 添加刷新频率限制 const lastRefresh = Date.now() - refreshTime; if (lastRefresh < 5000) { // 5秒内不重复刷新 return existingToken; } ``` 3. **失效处理**: - 当Refresh Token过期强制用户重新登录 - 记录异常刷新尝试(安全审计) 4. **服务端优化**: - 使用Redis缓存已签发Token - 实现Token自动撤销机制 > 此方案通过双Token机制和请求队列管理,实现了无缝的Token刷新体验,同保证系统安全性[^3][^4]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值