返回顶部
首页 > 资讯 > 前端开发 > 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://lsjlt.com/news/157821.html(转载时请注明来源链接)

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

猜你喜欢
  • VUE Token的失效处理详解
    目录目标思路分析代码落地总结目标 处理token失效的场景 token作为用户的关键令牌信息不是长久有效的,一般都会有一个失效时间(由后端来决定什么时长后失效),如果超过失效时间,...
    99+
    2024-04-02
  • Vue中如何处理token过期问题
    目录解决方案方案一方案二方案三:封装axios基本结构1、token是存在localStorage中2、问题和优化3、完整版后端为了安全,token一般存在有效时间,当token过期...
    99+
    2022-11-13
    Vue处理token过期 Vue token过期 token过期处理
  • Oracle数据库失效对象处理详情
    近期对数据库进行巡检,发现数据库业务用户(非 SYS/Public)下存在失效对象。对失效对象进行分析,主要包括失效的视图、物化视图、函数、包、触发器等。 思考: 基于以下原因,建议...
    99+
    2024-04-02
  • 详解JWT与Token的应用与原理
    目录JWT的应用Token的组成原理JWT对称加密JWT非对称加密生成私钥和公钥前言:JWT全称“JSON Web Token”,是实现Token的机制。官网...
    99+
    2023-05-16
    JWT应用与原理 Token应用与原理
  • @JsonFormat处理LocalDateTime失效的问题
    目录@JsonFormat处理LocalDateTime失效@JsonFormat格式化LocalDateTime失败@JsonFormat处理LocalDateTime失效 Fai...
    99+
    2024-04-02
  • vue中window.addEventListener(‘scroll‘, xx)失效的解决
    目录window.addEventListener(‘scroll‘, xx)失效解决window.addEventListener scroll在移动端无效...
    99+
    2024-04-02
  • MySQL 索引失效详解
    MySQL 索引失效详解 一、MySQL索引失效原因汇总 隐式的类型转换,索引失效查询条件包含or,可能导致索引失效like通配符可能导致索引失效查询条件不满足联合索引的最左匹配原则在索引列上使用my...
    99+
    2023-09-08
    mysql 数据库 sql
  • Vue中拦截器对token过期处理的示例分析
    这篇文章将为大家详细讲解有关Vue中拦截器对token过期处理的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。最近在做的一个项目,需要每个http请求下 都要添加...
    99+
    2024-04-02
  • 详解C语言的预处理效果
    目录前言一、预定义符号二、#define1.宏2.宏与函数3.带副作用的宏参数4. 宏和函数的不同5.#undef三、条件编译四、文件包含1.函数库文件包含2.本地文件包含总结前言 ...
    99+
    2024-04-02
  • thinkphp的token验证失败如何解决
    本篇内容主要讲解“thinkphp的token验证失败如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“thinkphp的token验证失败如何解决”吧!thinkphp的token验证失败...
    99+
    2023-07-04
  • 详解pandas中缺失数据处理的函数
    目录一、缺失值类型1、np.nan2、None3、NA标量二、缺失值判断1、对整个dataframe判断缺失2、对某个列判断缺失三、缺失值统计1、列缺失2、行缺失3、缺失率四、缺失值...
    99+
    2024-04-02
  • php如何处理setcookie失效的问题
    1、浏览器开启cookie。 2、删除在setcookie()之前的任何HTTP头部输出。 3、使用php的setcookie()来创建cookie即可。 使用php的setcook...
    99+
    2024-04-02
  • Vue.$set失效问题怎么解决
    这篇“Vue.$set失效问题怎么解决”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Vue...
    99+
    2024-04-02
  • vue中@keyup.enter失效问题及解决
    目录@keyup.enter失效问题情况一(我遇到的情况)情况二(百度时了解到的)@keyup.enter和@blur触发两次和回车无效1.vue 对 input 绑定两个事件:回车...
    99+
    2022-11-13
    vue中@keyup.enter @keyup.enter失效 vue中@keyup.enter失效
  • oracle视图失效如何处理
    当Oracle视图失效时,可以采取以下步骤进行处理:1. 检查视图依赖的表是否存在。如果表不存在或者被修改了,可能导致视图失效。可以...
    99+
    2023-10-12
    oracle
  • oracle索引失效如何处理
    当Oracle索引失效时,可以采取以下几种处理方法: 重新生成索引:使用ALTER INDEX … REBUILD命令重新构建失...
    99+
    2024-04-09
    oracle
  • CDN怎么处理缓存失效
    CDN通常通过以下几种方式处理缓存失效: 时间过期:CDN可以设置缓存的有效时间,一旦缓存过期,CDN会重新向源服务器请求最新的...
    99+
    2024-04-24
    CDN
  • Vue不定高展开动效原理详解
    目录使用场景背景实现transition 组件过渡效果原理解决使用场景 在大多数 APP 中,都有问答模块,类似于下面这种(bilibili 为例): 问答模块的静态页面开发并不复...
    99+
    2024-04-02
  • 详解Spring注解@Validated失效分析
    目录Controller 中使用 @Validated@Validated 是怎么生效的?MethodValidationInterceptor需要满足什么条件那么 Controll...
    99+
    2023-05-17
    Spring注解@Validated失效 Spring @Validated Spring注解
  • Vue.$set失效的原因以及解决方案
    这篇文章主要讲解了“Vue.$set失效的原因以及解决方案”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Vue.$set失效的原因以及解决方案”吧!偶然在项目中发现Vue.$set失效有这样...
    99+
    2023-06-20
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作