vue登录失效拦截后提示框提示消息出现多次问题

最新推荐文章于 2024-08-09 15:48:01 发布

不浪漫的蓝玫瑰

最新推荐文章于 2024-08-09 15:48:01 发布

阅读量2.5k

点赞数 1

分类专栏：开发工具文章标签： vue java

本文链接：https://blog.csdn.net/study_zmm/article/details/112189757

版权

开发工具专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前几天做了一个vue的项目, 其中有个登录拦截器的功能,根据后端返回的状态码获取登录状态,

401时,清空token 跳转登录,并打印后端返回的提示信息

正常情况是展示

今天在刷新页面时,登录过期,然后提示的信息弹出了2此,有一个没有消息内容

如图:

检查代码发现问题, 因为在刷新页面时,进行了2请求导致的,

最后对代码进行优化:

判断 response.data后端有返回数据时在进行打印,防止多次请求第二次请求没有拿到返回体导致打印为空的问题

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

不浪漫的蓝玫瑰

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue 401配合Vuex防止多次弹框的案例

01-18

1.安装Vuex npm install vuex –save 2. 新建store目录结构 3. 编辑store.js import Vuex from 'vuex' import Vue from 'vue' import defaultState from './state/state' import mutations from './mutations/mutations' import getters from './getters/getters' import actions from './actions/actions' Vue.use(Vuex) // 开发环境

Vue3.x使用Element Plus组件登录过期多次弹窗问题

BreenCL的博客

11-29

1660

Vue3.x使用Element Plus组件登录过期多次弹窗问题一、问题 Vue3.x版本配合使用Element Plus组件库，当前用户登录过期时，出现多次弹窗，效果如下图所示：出现的原因，后端进行身份过期的判断，当过期时请求接口参数code!==200，前端响应拦截时做了统一错误抛出处理；二、解决解决方法分为两种：第一种（与Vue2.x版本问题类似）：这种方式适用于在响应拦截时统一进行了抛错提示处理，利用一个状态值进行限制，当code!==200时在响应拦截处对响应数据进

参与评论您还未登录，请先登录后发表或查看评论

vue3前端开发-小兔鲜项目-token失效后拦截操作处理

最新发布

yrldjsbk的博客

08-09

284

vue3前端开发-小兔鲜项目-token失效后拦截操作处理！今天改一下之前的代码，实现功能是，当用户的token失效后，我们应该拦截这种请求，做出一些相应的处理操作才行。整体思路是，第一步：当拦截器捕捉到，请求反馈的状态代码是401时，我们需要首先清空浏览器应用aplication内部存储缓存的用户角色信息。为了方便大家的查阅，提供一份完整的https的代码内容。如图所示，代码比较简单。调用了之前我们写好的一些函数。然后第二步，完成一个跳转页面，引导用去跳转到登录页。

Vue 消除Token过期时刷新页面的重复提示

inticaler的博客

03-03

2512

1、问题现象页面长时间未操作，再刷新页面时，第一次弹出“token失效,请重新登录!”提示，然后跳转到登录页面，接下来又弹出了n个“Token已过期”的后端返回消息提示。 2、原因分析当前页面初始化，有多个向后端查询系统参数的调用，代码如下： created () { // ======================================================================== // 获取需要的系统参数，注意：getParam

最简单vue用户登录失效跳转登录页

请叫我欧皇！的博客

04-03

3214

不需要通过后端的token传的时间解析后来判断思路：在用户登录时，把当前时间戳存储在本地，之后在layout布局页面通过定时任务判断就完成了。

Vue axios 拦截器实现用户长时间不操作后跳转至登录页

风不知从何处起的小屋

04-29

1056

最近项目要求用户15分钟内不对页面进行操作（不向服务端发送请求）就提示用户登录失效，需要重新登录，并跳转至登录页。我这里只写了前端代码，因为这一块的服务端是我的同事来做。后期如果有机会我会将这一块进行补充。说明：这里是用的我的项目代码，部分引用是多余的我会进行说明 qs : get/delete请求传递数组数据时，对数组进行序列化时使用，解决在url中传递数组问题，可以参考我转载的上一篇文章，地址放在下面 axios 传递数组爬坑总结项目代码 import axios from 'axios'

vue实现登录拦截

10-15

Vue 实现登录拦截详解在本篇文章中，我们将详细介绍如何使用 Vue 实现登录拦截功能。登录拦截是一种常见的安全机制，用于防止未经授权的访问。在 Vue 项目中，实现登录拦截可以确保只有经过身份验证的用户才能访问...

VUE-消息提示框.docx

12-10

"VUE 消息提示框" 本文档主要介绍了在 Vue 框架中使用 Element UI 实现可输入多种格式内容的消息提示框，并且新增了消息提示校验和抛出校验的错误信息。 Vue 消息提示框背景介绍在 Vue 框架中，消息提示框是一种...

Vue登录拦截登录后继续跳转指定页面的操作

10-14

下面我们将详细探讨如何在Vue中实现登录拦截，并在用户登录后跳转到指定页面。首先，我们需要在Vue Router的配置文件（通常是`router/index.js`）中，为需要拦截的路由添加一个元数据（meta）属性。例如，我们可以...

基于Vue的Toast提示框

05-27

Vue的生态系统丰富，其中包括各种组件库，用于实现常见的UI交互，比如“Toast”提示框。"Toast"是移动应用中常见的一种通知方式，它可以在用户界面的某个位置短暂显示消息，而不会中断用户的操作流程。 Vue中的...

Vue 之 Toast 消息提示插件的简单封装

08-01

vue 中简单封装类似 Toast 的消息提示插件，然后在 vue 中任意位置都可以简单使用 Toast 消息显示最前，并且默认 3 秒后自动消失实现原理 1、vue 创建 Toast 消失提示组件的显示界面 2、js 代码动态引入 Toast 的 ...

vue登录拦截

maowencai的博客

09-06

1763

vue路由拦截器

vue 上次登录时间_Vue设置长时间未操作登录自动到期返回登录页

weixin_29419979的博客

02-11

337

vue设置长时间未操作登录以后自动到期返回登录页首先我们写在main.js文件中import routerutil from "@/utils/routerutil";//先将js文件在main.js中引入routerutil(router);我们会在登陆成功后调用sessionutil文件中的setsession，sessionutil下面写的有import sessionutil from '...

vue路由守卫、token过期处理、登陆后跳转到原页面

浮游的博客

04-01

3904

路由配置想要实现只有在登录或者注册成功的状态下，才能进入系统，这时候就可以使用路由守卫，最简单的说，路由守卫可以用来判断用户是否登录，该页面用户是否有权限浏览，一般利用token来实现。配置路由守卫在route.js中进行配置 import Vue from 'vue' import Router from 'vue-router' import system from './router/system' import doc from './router/doc' import pages fro

Servlet实现用户登录拦截功能

Kristabo的博客

01-18

1258

在HTTP协议的无状态特性下，为了实现用户的连续性和数据的持久化，可以使用会话来跟踪用户在多个HTTP请求之间的状态。需要注意的是，由于会话是在服务器端进行管理的，因此需要在跨页面和跨请求之间正确传递会话ID。一般情况下，浏览器会自动处理这些细节，但在某些特殊情况下，可能需要手动管理会话ID的传递和处理。中选择对应的可使用的tomcat程序，此处用的版本为Tomcat.9.0.62，接着在Http port中设置服务器端口（默认为8080），配置完成后点击Apply。可以看出，这个过滤器是。

vue3+axios刷新浏览器interceptors无效问题

三劫散仙

12-08

1344

vue前端应用在用户登录之后，服务端会返回一个认证token，前端会将此token存在cookie中，之后前端每次发起的向服务端的请求时，会通过axios的interceptors.request方法，来自动将cookie中的token取出来放在请求头中

Vue 刷新页面后 axios请求拦截器不起作用的解决办法

atrainee的博客

07-10

7021

Vue 刷新页面后 axios请求拦截器不起作用的解决办法起因：使用Vue axios作为网络请求的工具，在网页第一次打开时可以进行axios请求，并在config headers中添加token 作为请求令牌。但是，在手动刷新页面之后，网页数据出现无法请求的情况。后台返回:bad token format 后端返回结果如图：发现headers 中未添加请求头分析：我在main.js中对axios拦截器进行了配置，对请求时进行了判断，如果token存在，应当向headers中添..

vue---axios拦截器处理登录失效跳转登录页

maidu_xbd的博客

03-23

8913

axios拦截器（Interceptors）主要分为：（1）请求拦截器：在发送请求前进行拦截，可以根据发送的请求参数做一些发送参数的调整，例如设置headers （2）响应拦截器：在后台返回响应时进行拦截，可以根据状态码进入下一步处理。例如：登录失效跳转回登录页。项目需求：根据后台返回的状态码，统一处理。例如：token失效，回到登录页面；返回错误，给出统一的错误提示。完整代码：...

vue3 防止elMessage 弹窗多次弹出

Haolijuan_123的博客

08-04

1096

1.首先对message进行重新封装。

Vue与Element UI中的自定义可输入消息提示框及校验

本文档提供了一个实用的范例，展示了如何在Vue和Element UI中创建具有自定义校验功能的可输入消息提示框，这对于处理用户输入和确保数据质量的前端开发来说非常有价值。通过掌握这些技巧，开发者能够更好地在项目中...