登录中Token失效401拦截处理

问题描述

Token的有效性可以保持一定时间，如果用户一段时间不做任何操作，Token就会失效，使用失效的Token再去请求一些接口，接口就会报401状态码错误，需要做额外的处理。

问题思考

1.用户访问哪个接口时会出现401错误，在什么位置去拦截这个401？

2.检测到401后需要做什么处理。

解决方案-axios响应拦截器中做统一处理

                           失败回调中拦截401----->清除过期的用户信息，跳转到登录页

 响应拦截器中代码实现

import { ElMessage } from 'element-plus'
import 'element-plus/theme-chalk/el-message.css'

//导入useUserStore
import { useUserStore } from '@/stores/user'
//导入router
import router from '@/router'

// axios响应式拦截器
http.interceptors.response.use(res => res.data, e => {
  const userStore = useUserStore()
  //统一错误提示
  ElMessage({
    type: 'warning',
    message: e.response.data.message   
  })
  //401状态码，表示token过期，需要重新登录
  //1.清除本地用户数据
  //2.跳转到登录页面

  if (e.response.status === 401) {
    userStore.clearUserInfo()
    //跳转到登录页面
    router.push('/login')
  }
  return Promise.reject(e)
})