响应拦截器处理token 过期的小技巧

1:约定好token失效或者错误的验证码。

// 在响应拦截器中 我们约定的是401表示token的问题
	service.interceptors.response.use(
  response => {
	//公共方法......
	//水无常势,方法不一,不多赘述
    return response;
  },
  (error) => {

    if (error.response.status === 401) {
        ElMessage.error('登录信息已过期!请重新登录');
        setTimeout(() => {
          localStorage.clear();//清除本地存储
          window.location.replace('#/login')// 导到登录页
        }, 1000)
    return Promise.reject(error)
  }
)
//基本处理完成,但是有问题。比如一个页面有三四个接口调用,那么'登录信息已过期!请重新登录'这句话会弹三四次。

2:处理多次提示的问题
思路:定义一个变量, 然后加一道判断。符合条件进来之后改变变量,解决多次弹出问题

let isType = true;
service.interceptors.response.use(
  response => {
    return response;
  },
  (error) => {
    if (error.response.status === 401) {
      if (isType) {
        isType = false;
        ElMessage.error('登录信息已过期!请重新登录');
        setTimeout(() => {
          localStorage.clear();
          isType = true;
          window.location.replace('#/login')
        }, 1000)
      }
    }
    return Promise.reject(error)
  }
)
// 问题迎刃而解。
写的不好,大家相互交流,相互进步
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue请求拦截器是一种在发起请求前对请求进行拦截和处理的机制,而token过期则表示用户的身份验证信息已经失效。当请求拦截器检测到token过期时,可以进行以下处理。 首先,请求拦截器可以在每次请求前检查token的有效性。可以通过将token存储在本地缓存或浏览器的cookie中,然后在请求拦截器中获取并验证token的有效性,比如检查token是否存在、是否过期等。 如果请求拦截器发现token已经过期,可以进行以下操作之一:重定向到登录页面、弹出提示框提示用户重新登录或自动刷新token。 重定向到登录页面是一种常见的处理方式。请求拦截器可以跳转到登录页面,让用户重新登录以获取新的有效token。这样用户需要重新输入用户名和密码进行身份验证,以便获取新的token并将其存储在本地。 另一种处理方式是弹出提示框,提示用户token已经过期,请重新登录。在用户关闭提示框或点击确定按钮后,请求拦截器可以跳转到登录页面,进行重新登录操作。 还有一种处理方式是自动刷新token。当请求拦截器检测到token过期时,可以调用刷新token的接口,获取新的有效token,并将其更新到本地缓存或cookie中。然后,重新发起请求,确保请求能够正常进行。 综上所述,vue请求拦截器可以通过检查token的有效性,判断其是否过期,并采取相应的处理方式,如重定向到登录页面、弹出提示框或自动刷新token,以确保用户能够正常进行请求操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值