解决token验证过期,返回登录页面,因为发送多次请求,导致消息多次提示的问题.

最新推荐文章于 2024-06-25 11:44:47 发布
最新推荐文章于 2024-06-25 11:44:47 发布
阅读量5.5k 收藏 15
点赞数 7
分类专栏： web前端 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50061893/article/details/113941101
版权

我们如果通过在axios响应拦截器中拦截状态码是否为401来提示反馈给用户登录过期消息那么将会弹窗多次,因为即使token过期了也还会发送多次请求,就会有多次401,就会弹窗多次.在这里插入图片描述

造成结果如下

在这里插入图片描述

这时候我们可以通过过期的时候传递一个值存在localStorage中,然后进入登录界面在生命周期函数中,判断该值是否存在来判断是否是因为登录失效而返回的登录界面.如果是就提示用户登录失效,如果不是则不做任何操作.这样就只会弹出一次登录已失效,请重新登录

这是传值一个值存储到本地

这是登陆界面的代码

冲动消费
关注
  • 7
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
【SpringBoot】44、SpringBoot中整合JWT实现Token验证（整合篇）
Asurplus
02-28 21万+
什么是JWT？ Json web token (JWT)，是为了在网络应用环境间传递声明而执行的一种基于 JSON 的开放标准（(RFC 7519)，该 token 被设计为紧凑且安全的，特别适用于分布式站点的单点登录（SSO）场景。JWT 的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源，也可以增加一些额外的其它业务逻辑所必须的声明信息，该token也可直接被用于认证，也可被加密。 为什么需要JWT? 当我们开发前后端分离项目时，要求我们对用户会话状态要进行一
token 过期后，如何自动续期？
很多时候犯错都是在不知情的情况下发生的
05-24 597
如果经常需要用户重新登录，显然这种体验不是太好，因此很多应用会采用token过期后自动续期的方案，只有特定条件下才会让用户重新登录。首先我们看一个单token方案，这个方案除了可以实现token续期以外，还可以实现某些条件下的强制重新登录。JWT token的 payload 部分是一个json串，是要传递数据的一组声明，这些声明被JWT标准称为claims。另外后端还可以记录刷新token的次数，比如最多刷新50次，如果达到50次，则不再允许刷新，需要用户重新授权。代码语言：javascript。
解决Spring Security OAuth在访问/oauth/token时候报Bad client credentials/401 authentication is required
weixin_42554373的博客
12-02 4973
出现这个问题的具体原因一般有以下两点： 1.在授权的部分我们一般是通过使用自己的login action进行http basic的方式进行授权，而我们在使用Spring Security的时候只对外暴露了登陆的这个接口，就是说其它的接口都在Spring Security的保护范围内了，包括/oauth的接口。 2.在通过1的post方式授权通过之后使用http://localhost:8090/oauth/token?client_id=1293380307393789953&client_secr
如何模拟token过期？实现token过期后自动退登
最新发布
Rovstephanie的博客
06-25 348
在前端想做token过期后自动退登时，我们并不能去设置token的超时时长，这是由后端来做的，而通常这个时长又非常长，我们不可能去等待Token过期了再去调试。所以我们尝试模拟token过期的情况，
axios因token过期导致弹出多条信息提示，简单处理解决！
海贼王某人的博客
02-23 3625
首先看一下问题，我们在某个页面同时发起三条请求，token过期导致请求失败，返回登录页后一下弹出三个信息提示，体验感不太好 我们只希望他弹出一条提示，解决办法也很简单，在我们封装请求的js文件中加一个判断即可，先声明一个变量showMsg来控制是否需要弹框，初始化为true,然后在请求判断中如果token失效导致走了401，先判断当前是否可以显示弹框，初始化为true第一次可以显示，然后把showMsg变为false,当地二第三请求走到这里的时候，showMsg为false，就不会再继续弹框了，第一次弹框
vue登录验证token失效多次弹窗问题修复
qq_37263478的博客
06-29 2140
定义一个变量，解决问题
axios请求拦截，token失效，多个请求报错导致多次显示弹框的问题
Anyuegogogo的博客
08-13 4075
token失效，请求头中需要带上token的请求就会报错，axios的请求拦截中会对异常做处理并显示弹框。如果同时多个请求报错就会显示多个弹框。这样很影响用户体验，我们只需要弹出框弹出一次。 以下是解决方法： // 设置一个变量 let tokenAbnormal = false; // 下面是部分异常处理的代码 // 异常处理 // token失效处理，请根据业务需求自行修改 if (res.statusCode === 401 || res.statusCode === 402 || res.sta.
vue中token被篡改后axios响应拦截弹出多个窗口
12-06 812
token失效，请求头中需要带上token的请求就会报错，axios的请求拦截中会对异常做处理并显示弹框。如果同时多个请求报错就会显示多个弹框。这样很影响用户体验，我们只需要弹出框弹出一次。解决办法
token身份验证，解决refresh_token多次刷新问题
热门推荐
m0_55141616的博客
11-02 1万+
基于Token的身份验证的基本过程如下: 1.用户通过用户名和密码发送请求。 2.服务器端程序验证。 3.服务器端程序返回一个带签名的token给客户端。 4.客户端储存token,并且每次访问都携带token到服务器端的。 5.服务端验证token，校验成功则返回请求数据，校验失败则返回错误码跳转重新登录。 使用refresh token的身份验证操作： 但是如果用户在正常操作的过程中，token过期失效了，要求用户重新登录，对用户的体验会很不好。 使用refresh token，
Android token过期刷新处理的方法示例
08-26
Android Token 过期刷新处理可以通过两种解决方案来实现：第一种解决方案是通过 OkHttp 提供的 Authenticator 接口来实现 Token 的刷新，第二种解决方案是根据与后端协商好的返回码处理刷新 Token 步骤。两种解决...
Android OkHttp实现全局过期token自动刷新示例
01-20
现在，每当请求返回401（未授权）或其他预设的过期状态码时，拦截器会自动触发刷新token的过程，然后使用新token重新发送请求。整个过程对用户来说是透明的，提高了应用的用户体验。 值得注意的是，上述示例中的`...
token 微信access 过期_微信公众号开发之解决Access Token过期的问题
weixin_42515063的博客
01-30 2486
因为access_token，在以后的高级功能里面会经常用到，所以这里不得不这里对前面所讲解的access_token改造一下。另外需要说明的是access_token是变化的,有自己的周期,官方解释为:"有效期为7200秒",这就要求我们把获得的access_token存入一个物理文件或者Application中,请求到过期后修改这些内容,需要用的时候读出来.有些人可能想到了，如果过期我就在获得...
token过期时刷新页面重复提示vue
aqeerqwuyrqr的博客
03-18 1487
1.问题描述 由于axios调用是异步执行的，刷新页面后，页面所有请求几乎同时触发，然后这些请求的响应就会被陆续返回。响应会被response拦截器处理 2.解决方法 在全局变量文件中global.js，增加token无效标记，代码如下： export default { // token无效标记 TokenInvalidFlag : 0 } 修改拦截器代码： instance.interceptors.response.use(response => { if (response) { switch
token过期跳转登录界面（踩坑记录）
weixin_43336525的博客
07-22 1329
在进行系统设计时，我们时常有这样的需求：用户每次请求会将token发送给后端，token如果过期，我们将请求不到数据，页面跳转到登录界面。我们只需要在这个js文件中引入router，把this.$router.push改为router.push 就能正常跳转了！我们写响应拦截的是在index.js文件中 ，但是只有在Vue文件中this.$router才能找到路由，，我刚开始以为是箭头函数的原因，后来引入了that还是不行。经过上述步骤后，调试运行一直报错！，如果返回的结果显示用户未登录，
token过期，弹出多个ElMessageBox
weixin_40283749的博客
05-10 306
return Promise.reject(new Error(res.msg || '请求错误')) //加上这一句可以阻止多个弹窗。ElMessageBox.confirm('登录已过期，返回登录页?', '系统提示', {confirmButtonText: '确认',//对本地存储数据清除。// 对token过期拦截。
Vue 消除Token过期时刷新页面的重复提示
null_10086的博客
07-08 281
1、问题现象水桃小说网 https://www.1752.info   页面长时间未操作，再刷新页面时，第一次弹出“token失效,请重新登录!”提示，然后跳转到登录页面，接下来又弹出了n个“Token已过期”的后端返回消息提示。 2、原因分析   当前页面初始化，有多个向后端查询系统参数的调用，代码如下： created () { // ======================================================================== /.
vue axios 封装请求拦截多次弹窗的问题
maDreambig的博客
12-01 3097
问题原因： vue项目使用axios 封装，当token过期或者失效后，弹窗提示用户登陆失效，重新登陆。在一些页面中初始化时调了多个API，会出现多次弹出重新登陆的弹框 解决方案： 使用axios中的CancelToken，在判断登陆失败时，跳转路由，中断后面的API请求 实现方式： 1、reques.js关键代码 //请求拦截器 const http = axios.create() http.interceptors.request.use((config) => { ..
tokeninput输入提示
零度的浪漫
07-29 355
官网地址： https://github.com/loopj/jquery-tokeninput 去年在做后台时候，有一些录入的视频需要添加标签，这个标签可以是已经有的标签，也可以使自定义的，后台录入人员写出首字母，然后可以显示下拉列表进行提示，用户可以根据提示进行选择。 ①导入需要用到的js文件和css文件： <script type="text/javascript...
axios拦截器interceptors.response执行两次或者多次
哈米西的博客
03-20 1030
axios执行了拦截器 instance.interceptors.request.use、instance.interceptors.response.use方法，再做token过期（状态码为50020）需重新跳转登录页面的逻辑时，发现onBackendFail方法执行了两次，导致登录页跳转了两次，提示了两次。先排查是不是重复执行了instance.interceptors方法，或者instance实例化了多次，调用了多次。更改一下Options配置，还参考了一些配置例子。
axios二次封装实践：接口管理与token验证
"本文主要介绍如何对axios进行二次封装，以适应前端项目中接口管理和调用的需求，并涉及了处理身份认证、环境切换、超时设置、跨域配置以及请求拦截器的应用，尤其在处理token验证方面提供了示例。" 在前端开发中，...
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值