脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → VUE Token的失效处理

VUE Token的失效处理详解

 更新时间：2021年11月19日 15:34:08   作者：RxinY924  
这篇文章主要为大家介绍了VUE 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)
  }
)

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

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

相关文章

  • django中使用vue.js的要点总结

    django中使用vue.js的要点总结

    在本篇文章里小编给各位整理了关于django中使用vue.js需要注意的地方以及相关知识点，需要的朋友们跟着学习参考下。
    2019-07-07
  • 详解Vue中双向绑定原理及简单实现

    详解Vue中双向绑定原理及简单实现

    这篇文章主要为大家详细介绍了Vue中双向绑定原理及简单实现，文中的示例代码讲解详细，对我们深入了解Vue有一定的帮助，需要的可以参考一下
    2023-05-05
  • vue引入swiper插件的使用实例

    vue引入swiper插件的使用实例

    本篇文章主要介绍了vue引入swiper插件的使用实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • Nuxt项目支持eslint+pritter+typescript的实现

    Nuxt项目支持eslint+pritter+typescript的实现

    这篇文章主要介绍了Nuxt项目支持eslint+pritter+typescript的实现,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • Vue infinite update loop的问题解决

    Vue infinite update loop的问题解决

    这篇文章主要介绍了Vue "...infinite update loop..."的问题解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • vue实现登陆登出的实现示例

    vue实现登陆登出的实现示例

    本篇文章主要介绍了vue实现登陆登出的实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue项目中更改名字和图标的简单实现步骤

    vue项目中更改名字和图标的简单实现步骤

    今天在写vue项目时碰到的问题是怎么修改vue的网页图标,所以下面这篇文章主要给大家介绍了关于vue项目中更改名字和图标的简单实现,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • Vue首页界面加载优化实现方法详解

    Vue首页界面加载优化实现方法详解

    如果你也遇到在 vue 应用中，首页加载资源过多，导致加载缓慢的问题，下面的方法也许能帮到你，主要的处理思想是：让首页多余的资源能在需要它的时候再加载
    2022-09-09
  • vue中watch监听对象中某个属性的方法

    vue中watch监听对象中某个属性的方法

    watch 的用法有个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行，如果我们需要在最初绑定值得时候也执行函数，就需要用到 immediate 属性，这篇文章主要介绍了vue中watch监听对象中某个属性的方法,需要的朋友可以参考下
    2023-04-04
  • Vue3搭建组件库开发环境的示例详解

    Vue3搭建组件库开发环境的示例详解

    这篇文章给大家分享Vue3搭建组件库开发环境，给大家讲解依次搭建组件库、example、文档、cli，本文内容是搭建组件库的开发环境的过程，感兴趣的朋友跟随小编一起看看吧
    2022-11-11

最新评论