双token刷新并把未请求成功的接口进行保存并重新请求

已于 2024-04-02 21:24:34 修改
阅读量755 收藏 2
点赞数 6
文章标签： javascript 开发语言 ecmascript
于 2024-03-24 08:50:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/m0_66570642/article/details/136979985
版权
本文介绍了如何在前端应用中处理接口调用中token过期的问题，通过检测并保存过期请求，在token刷新成功后重新发起这些请求，确保用户体验连续性，避免在游戏等关键场景下强制跳转到登录页。

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

在接口调用中token都是有过期时间的，如果token过期，后端的接口是调用不成功的，如果没有和后端的交互，那么这个项目也就不能称之为项目了。如果在token过期的时候强制用户跳转到登录页面，这在app里面是不合理的，假设一下比如我正在激烈的团战，突然给我跳转到登录页面告诉我登录过期了，让我重新登录？？？这就很奇怪好吧。

目录

1.初始化数据

2.检测过期请求保存到数组

3.重新调用保存的过期接口

4.完成代码

1.初始化数据

初始化数组，并声明将过期接口保存在数组中的函数

let subSequest = [];//用来存储过期接口

// 把过期请求添加在数组中
function addRequest(request) {
	console.log('把过期请求添加在数组中')
	subSequest.push(request)
}

2.检测过期请求保存到数组

使用响应拦截器，检测toekn是否过期，如果过期把过期请求保存在数组中。

//初始化实例
const http = axios.create({
	// // #ifdef H5
	// baseURL: useUser.baseUrl,
	// // #endif
	// // #ifndef H5

	// // #endif
	baseURL: 'http://114.55.135.211:8887/
最低0.47元/天 解锁文章
vue 双Token 的无感刷新
an_julia的博客
03-21 732
vue无感刷新token
uniapp中request请求token失效后重新获取token且重新请求
Andy的博客
07-22 4680
在APP日常使用过程中可能遇到token过期或者token失效的情况；平常大家的做法就是给个提示，然后需要再次请求一次接口重新获取token，这样的操作给用户一种极不友好的体验，为了让用户感觉不到重新获取token这个场景，那么就需要在用户不知情的情况下重新获取token且再次重新请求接口使操作流程不中断。本次给大家介绍在请求接口request内建立重试机制，该机制统一封装在一个request请求中。
实现token过期后拦截请求，刷新token后再重新请求
weixin_43552291的博客
03-07 1317
登录系统后会有新的token和refreshToken，token会在一定时间后失效，这时就需要拦截当前的所有请求，先通过refreshToken刷新token，如果刷新成功，将获取到新的token和refreshToken，再将拦截的请求重新使用新的token请求一遍；如果刷新失败说明该token已完全过期就需要退出到登录页面重新登录。
node 实现双token无感刷新
最新发布
jiang04070518的博客
03-06 336
1.技术价值：双Token机制是Web/App安全认证的演进方向，尤其适合高并发、长生命周期场景（如在线办公、实时通信）2.实践建议：根据业务需求调整Token有效期，通过日志监控异常刷新行为3.如有不足 欢迎评论区补充。
登录时做 双token实现无感刷新
weixin_58215826的博客
05-17 1808
双token系统可以更好地管理用户的权限。例如，在开放平台中，第三方应用可以通过refresh token来获取access token，而不需要知道用户的用户名和密码，这样既保证了用户信息的安全，又赋予了第三方应用一定的权限。总之，双token系统是一种常见的安全设计模式，通过分离短期和长期凭证，以及用户直接使用的token和用于刷新的token，来提高系统的安全性和灵活性。：通过短期的access token和长期的refresh token，可以在不影响用户体验的情况下，减少安全风险。
双token无感刷新
stc_ljc的博客
09-20 2220
双token无感刷新是一种在Web开发中常用的安全及用户体验优化技术，主要涉及到两种类型的token：Access Token（访问令牌）和Refresh Token（刷新令牌）。以下是对双token无感刷新的详细解释
双token的无感刷新
2301_81801630的博客
11-07 1996
作为计算机术语时，是“令牌”的意思。Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。
Vue中登录验证成功后保存token,并每次请求携带并验证token操作
10-14
在Vue应用程序中，实现登录验证成功后...通过以上步骤，我们就实现了Vue中登录验证成功后的token保存、每次请求携带token以及token验证的功能。这确保了用户的会话安全，同时也为后端提供了验证用户身份的必要信息。
请求时token过期自动刷新token操作
10-14
当`token`刷新成功后，它会遍历数组并执行每个回调，这些回调通常用于重新发起因`token`过期而暂停的原始请求。 7. **添加和管理订阅**： 使用`addSubscriber`函数来注册新的回调。在`checkStatus`函数中，当检测...
Spring Cloud + JWT实现双Token刷新
洛*璃的博客
08-29 1506
在使用JWT进行身份验证时，通常会有两个主要的Token：用于实际的 API 请求，通常具有较短的有效期。用于获取新的 Access Token，通常具有较长的有效期。客户端在登录时，会生成两个Token和），[通常情况下，是将两个TOKEN都返回给客户端，但是博主这里只返回了ACCESS_TOKEN给前端，和USER_ID一起存储到Redis中]在每次API请求时进行验证，过期后需要使用来获取新的。可以定期更新，进一步提高系统的安全性。
axios实现token过期时自动重新刷新，并让之前的请求重新再发一次请求，实现请求重发，而让调用的的人无感
weixin_45133990的博客
06-22 915
axios 请求重发 同一个请求
vue无感刷新Token并重新请求
Faaaaaaq的博客
09-22 833
vue 拦截器拦截401重新请求Token 无感刷新Token 之后重新请求报401的接口。
基于spring security实现vue2前后端分离的双token刷新机制（完整代码详解，含金量拉满！）
qq_60614034的博客
03-27 4148
网上许多博主，放张图片讲讲双token原理就发出来，没有含金量，还耽误大伙的时间。但是我不一样，我将会把代码的每一步骤都讲明白，并把详细代码放出来，让每一位看到的人都能跟着一步步自己搞，弄明白每一步的执行流程。要是觉得我跟那些博主一样，也是水文章，互相抄袭，请在评论区直接开骂。如果是第一次接触security请看这篇spring security单token前后端分离详细配置。
全方位解析双 Token实现无感刷新：用 Spring Boot + Vue + Redis 构建高安全认证体系
小菜的博客
12-14 2078
访问Token（Access Token）和刷新Token（Refresh Token），来分别处理认证与授权问题。双Token认证机制为Web应用提供了更强的安全性和更好的用户体验。通过合理的配置和管理，访问Token和刷新Token分别承担不同的功能，有效防止了Token被长期滥用的风险，并减少了用户频繁登录的困扰。尽管实现较为复杂，但其带来的好处是显而易见的。通过本文的Spring Boot与Vue示例，希望开发者能够更好地理解并实施双Token认证机制，提升应用的安全性与稳定性。！！
用 Axios 封装一个双 token 无感刷新
猿特佳
06-06 1985
为了保证安全性，后端设置的Token不可能长期有效，过了一段时间Token就会失效。而发送网络请求的过程又是需要携带Token的，一旦Token失效，用户就要重新登陆，这样用户可能需要频繁登录，体验不好。为了解决这个问题，采取双Token（Access_Token,Refresh_Token）无感刷新，用户完全体会不到Token的变化，但实际上，Token已经刷新了。
token过期机制的问题
qq_46940224的博客
10-15 6493
浅谈一下token过期机制的问题
vue axios实现双token无感刷新
weixin_45606890的博客
07-26 3005
vue实现token无感刷新
Express 双Token认证以及实现无感刷新Token
命师
09-18 873
相信朋友们在写项目时，都必须要考虑用户信息安全的一个问题，那么这时候大多数兄弟选择使用token来保护用户信息。但是又对token所设置的时间拿捏不准token设置的时间长了，那么我们设置token的意义也就消失了，数据还是会被不法分子拦截、劫持。token设置的时间短了，虽然说保障了我们用户的信息安全，但是在用户使用的过程中，token已过期就会需要我们用户重新登录，造成用户的体验感很差。在这时候我们就要考虑，如何在确保用户信息安全的情况下，让用户有一个良好的体验呢？
前端双token无感刷新详解
小庄zzz的博客
08-04 2207
在介绍双token无感刷新之前，我们先简单介绍一下什么是token吧！token是一种用户标识，表示用户身份，类似于我们的身份证件。Token是在服务端产生的。如果前端使用用户名/密码向服务端请求认证，服务端认证成功，那么在服务端会返回Token给前端。前端可以在每次请求的时候带上Token证明自己的合法地位。如果这个Token在服务端持久化（比如存入数据库），那它就是一个永久的身份令牌。
android token过期后刷新并重新请求A接口。代码实现
06-06
好的，以下是一个可能的代码实现，供您参考： 首先，我们需要定义一个TokenInterceptor拦截器类，用于在每次请求接口时检查Token是否过期： ```java public class TokenInterceptor implements Interceptor { private static final String TOKEN_KEY = "token"; private static final String AUTHORIZATION_HEADER = "Authorization"; private SharedPreferences mSharedPreferences; private ApiService mApiService; public TokenInterceptor(Context context, ApiService apiService) { mSharedPreferences = context.getSharedPreferences("my_prefs", Context.MODE_PRIVATE); mApiService = apiService; } @Override public Response intercept(Chain chain) throws IOException { Request request = chain.request(); String token = mSharedPreferences.getString(TOKEN_KEY, ""); if (!TextUtils.isEmpty(token)) { request = request.newBuilder() .addHeader(AUTHORIZATION_HEADER, "Bearer " + token) .build(); } Response response = chain.proceed(request); if (response.code() == 401) { // Token过期，重新请求Token并重试请求 String newToken = getNewToken(); if (!TextUtils.isEmpty(newToken)) { // 更新Token并重试请求 mSharedPreferences.edit().putString(TOKEN_KEY, newToken).apply(); Request newRequest = request.newBuilder() .addHeader(AUTHORIZATION_HEADER, "Bearer " + newToken) .build(); response = chain.proceed(newRequest); } } return response; } private String getNewToken() { // 发送获取新Token的请求，返回新Token Call<TokenResponse> call = mApiService.refreshToken(); try { Response<TokenResponse> response = call.execute(); if (response.isSuccessful()) { TokenResponse tokenResponse = response.body(); return tokenResponse.getToken(); } } catch (IOException e) { e.printStackTrace(); } return null; } } ``` 然后，在创建Retrofit实例时，添加上述拦截器： ```java OkHttpClient client = new OkHttpClient.Builder() .addInterceptor(new TokenInterceptor(context, apiService)) .build(); Retrofit retrofit = new Retrofit.Builder() .baseUrl(BASE_URL) .client(client) .addConverterFactory(GsonConverterFactory.create()) .build(); ``` 其中，apiService是一个定义了刷新Token接口的Retrofit接口。 最后，在请求A接口时，如果遇到Token过期的情况，TokenInterceptor会自动发送请求获取新Token，并重新发送A接口请求： ```java Call<ResponseA> call = apiService.getAData(); call.enqueue(new Callback<ResponseA>() { @Override public void onResponse(Call<ResponseA> call, Response<ResponseA> response) { if (response.isSuccessful()) { // 请求成功 ResponseA responseA = response.body(); // 处理返回的数据 } else { // 请求失败 // 这里不需要处理401 Unauthorized错误，TokenInterceptor已经处理过了 } } @Override public void onFailure(Call<ResponseA> call, Throwable t) { // 请求失败 } }); ``` 以上就是一个简单的android token过期后刷新并重新请求A接口的代码实现，仅供参考。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

宝子向前冲

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值