广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >VUE Token的失效处理详解
  • 568
分享到

VUE Token的失效处理详解

2024-04-02 19:04:59 568人浏览 八月长安
摘要

目录目标思路分析代码落地总结目标 处理token失效的场景 token作为用户的关键令牌信息不是长久有效的,一般都会有一个失效时间(由后端来决定什么时长后失效),如果超过失效时间,

目标

处理token失效的场景

token作为用户的关键令牌信息不是长久有效的,一般都会有一个失效时间(由后端来决定什么时长后失效),如果超过失效时间,当前token就不能再作为用户标识请求数据了,这时候我们需要做一些额外的失效处理

思路分析

在这里插入图片描述

后端:收到用户访问某个接口时,检查当前token是否失效,如果token已经失效,返给前端一个约定好的状态码 10002

前端:在响应拦截器中,分析接口的返回值,如果状态码为10002, 则进行token失效操作

代码落地

**src/utils/request.js** 中,处理响应拦截器的error时,补充自定义的逻辑

由于页面跳转要用到路由,这里先引入


// 引入路由
import router from '@/router'

代码


// 响应拦截器中
//  1. 根据后端返回数据判断本次操作是否成功,不成功主动报错
//  2. 如果成功,只返回有效数据
service.interceptors.response.use(
  response => {
    // 后端和前端的约定:success=true表示请求成功
    if (response.data.success) {
      return response.data
    } else {
      // 如果success为false 业务出错,直接触发reject
      // 被catch分支捕获
      return Promise.reject(new Error(response.data.message))
    }
  },
  async error => {
    console.log('请求出错啦', error)
    if (error.response.data.code === 10002) {
      console.log('token失效')
      await store.dispatch('user/loGout')
      // .Vue -- this.$route.fullPath
      //  .js -- router.currentRoute.fullPath

      router.push('/login?return_url=' + encodeURIComponent(router.currentRoute.fullPath))
    }
    console.dir(error)
    return Promise.reject(error)
  }
)

以上方案为后端主导的方案,前端只需要拿到错误码做业务处理即可,此方案也是常用且安全的最优方案

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!

--结束END--

本文标题: VUE Token的失效处理详解

本文链接: https://www.lsjlt.com/news/157821.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • VUE Token的失效处理详解
    目录目标思路分析代码落地总结目标 处理token失效的场景 token作为用户的关键令牌信息不是长久有效的,一般都会有一个失效时间(由后端来决定什么时长后失效),如果超过失效时间,...
    99+
    2022-11-12
  • 详解JWT与Token的应用与原理
    目录JWT的应用Token的组成原理JWT对称加密JWT非对称加密生成私钥和公钥前言:JWT全称“JSON Web Token”,是实现Token的机制。官网...
    99+
    2023-05-16
    JWT应用与原理 Token应用与原理
  • Oracle数据库失效对象处理详情
    近期对数据库进行巡检,发现数据库业务用户(非 SYS/Public)下存在失效对象。对失效对象进行分析,主要包括失效的视图、物化视图、函数、包、触发器等。 思考: 基于以下原因,建议...
    99+
    2022-11-12
  • vue中window.addEventListener(‘scroll‘, xx)失效的解决
    目录window.addEventListener(‘scroll‘, xx)失效解决window.addEventListener scroll在移动端无效...
    99+
    2022-11-13
  • @JsonFormat处理LocalDateTime失效的问题
    目录@JsonFormat处理LocalDateTime失效@JsonFormat格式化LocalDateTime失败@JsonFormat处理LocalDateTime失效 Fai...
    99+
    2022-11-13
  • 详解pandas中缺失数据处理的函数
    目录一、缺失值类型1、np.nan2、None3、NA标量二、缺失值判断1、对整个dataframe判断缺失2、对某个列判断缺失三、缺失值统计1、列缺失2、行缺失3、缺失率四、缺失值...
    99+
    2022-11-13
  • 详解C语言的预处理效果
    目录前言一、预定义符号二、#define1.宏2.宏与函数3.带副作用的宏参数4. 宏和函数的不同5.#undef三、条件编译四、文件包含1.函数库文件包含2.本地文件包含总结前言 ...
    99+
    2022-11-12
  • Vue中拦截器对token过期处理的示例分析
    这篇文章将为大家详细讲解有关Vue中拦截器对token过期处理的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。最近在做的一个项目,需要每个http请求下 都要添加...
    99+
    2022-10-19
  • Python Pandas知识点之缺失值处理详解
    前言 数据处理过程中,经常会遇到数据有缺失值的情况,本文介绍如何用Pandas处理数据中的缺失值。 一、什么是缺失值 对数据而言,缺失值分为两种,一种是Pandas中的空值,另一种是...
    99+
    2022-11-12
  • 安装Oracle 11g失败的详细解决处理过程
      今天闲着没什么事安装了一下Oracle数据库,但是在这过程中遇到了许多的问题,这里想和大家分享一下。   一开始我安装的是Oracle 12c,但这一安装不要紧,...
    99+
    2022-10-18
  • C/C++迭代器的失效问题详解
    目录前言下面是我今天做的一些代码测试:我们接着往下看下一个出问题的测试代码:迭代器失效总结前言 我今天在使用迭代器时发现了一个问题,这个问题就是我在使用的迭代器时发现莫名其妙的有越界...
    99+
    2022-11-13
  • Spring详细讲解事务失效的场景
    目录1)未被Spring管理2)数据库引擎不支持事务3)事务方法没有被public修饰4)方法使用final修饰5)同一类中方法调用6)未开启事务7)多线程调用8)错误的传播行为9)...
    99+
    2022-11-13
  • 详解MySQL索引失效的几种情况
    MySQL索引是提高查询效率的重要手段。索引失效会导致查询效率下降,甚至全表扫描,影响数据库性能。以下是可能导致MySQL索引失效的情况: 1. 使用or操作符 当where语句中使用or操作符并且or两边的条件涉及到至少两个字段...
    99+
    2023-09-03
    数据库 mysql java
  • php如何处理setcookie失效的问题
    1、浏览器开启cookie。 2、删除在setcookie()之前的任何HTTP头部输出。 3、使用php的setcookie()来创建cookie即可。 使用php的setcook...
    99+
    2022-11-12
  • Vue不定高展开动效原理详解
    目录使用场景背景实现transition 组件过渡效果原理解决使用场景 在大多数 APP 中,都有问答模块,类似于下面这种(bilibili 为例): 问答模块的静态页面开发并不复...
    99+
    2022-11-13
  • Spring事务失效场景的详细整理
    目录前言数据库引擎不支持事物方法不是 public 的自身调用问题不支持事物异常被吃掉异常类型错误总结前言 项目中用Spring的 @Transactional 注解控制事务,使用中...
    99+
    2022-11-13
  • 详解Vue自定义指令如何实现处理图片加载失败的碎图
    目录一、自定义指令1、局部注册和使用2、全局注册和使用二、自定义指令处理图片加载失败(碎图)一、自定义指令 vue中除v-model、v-show等内置指令之外,还允许注册自定义指令...
    99+
    2023-02-15
    Vue自定义指令 Vue处理碎图 Vue图片加载失败
  • Vue.$set失效的原因以及解决方案
    这篇文章主要讲解了“Vue.$set失效的原因以及解决方案”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue.$set失效的原因以及解决方案”吧!偶然在项目中发现Vue.$set失效有这样...
    99+
    2023-06-20
  • Python高效处理大文件的方法详解
    目录开始处理文本串行处理多进程处理并行处理并行批量处理将文件分割成批运行并行批处理tqdm 并发结论为了进行并行处理,我们将任务划分为子单元。它增加了程序处理的作业数量,减少了整体处...
    99+
    2022-11-11
  • Python pandas处理缺失值方法详解(dropna、drop、fillna)
    目录面对缺失值三种处理方法:对于option1:对于option 2:对于option3总结面对缺失值三种处理方法: option 1: 去掉含有缺失值的样本(行)option 2:...
    99+
    2022-11-11
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作