纯净、安全、绿色的下载网站

首页|软件分类|下载排行|最新软件|IT学院

当前位置:首页IT学院IT技术

VUE Token的失效处理 VUE Token的失效处理详解

RxinY924   2021-11-19 我要评论
想了解VUE Token的失效处理详解的相关内容吗RxinY924在本文为您仔细讲解VUE Token的失效处理的相关知识和一些Code实例欢迎阅读和指正我们先划重点:VUE,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)
  }
)

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

总结

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


相关文章

猜您喜欢

  • Python位图分割 Python实现位图分割的效果

    想了解Python实现位图分割的效果的相关内容吗小斌斌_Plus在本文为您仔细讲解Python位图分割的相关知识和一些Code实例欢迎阅读和指正我们先划重点:Python位图,Python位图分割下面大家一起来学习吧。..
  • SpringBoot全局异常处理 SpringBoot全局异常处理方式

    想了解SpringBoot全局异常处理方式的相关内容吗三毛村滴雪鱼粉在本文为您仔细讲解SpringBoot全局异常处理的相关知识和一些Code实例欢迎阅读和指正我们先划重点:SpringBoot全局异常,全局异常处理,全局异常下面大家一起来学习吧。..

网友评论

Copyright 2020 www.tdogsoftware.com 【零度软件园】 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 点此查看联系方式