解决token超时问题

1.token超时问题,主要是会出现一个token失效的问题
如果查看报错信息就会发现出现了状态码401,那么我们会在响应拦截器里,做出响应的选择,具体实现步骤为

      // 401:什么意思？无权限
        1：删除token和用户信息
        2:提示错误信息跳转登陆页

1.删除token和用户信息

在mutations清空我们的state
之所以做这一步操作,是因为我们的vuex主要用来存放公共数据的而,state定义好了公共数据,我们用mutations去修改它
这张图就很清晰了

具体代码
路径为:store/modules/user.js

    LOGOUT(state) {
    
    
      state.token = ''
      state.userInfo = ''
    }

2:提示错误信息跳转登陆页

关键代码
路径为utils/request.js

    // 错误处理 --> 拦截失效码
    if (error.response && error.response.status === 401) {
    
    
      store.commit('user/LOGOUT')
      Message.error(error.response.data.message)
      router.push('/login')
    }

为什么我们以401作为判断标准

  (error) => {
    
    
    // 错误处理 --> 拦截失效码
    if (error.response && error.response.status === 401) {
    
    
      store.commit('user/LOGOUT')
      Message.error(error.response.data.message)
      router.push('/login')
    }

    // console.dir(error);
    return Promise.reject(error)
  })

这里补充一个状态码问题

  2开头：成功
  3开头：重定向
      301：永久重定向
      304：协商缓存
  资源过期了，进行http请求，但接口告诉客户端资源无修改，还可使用
  4:客户端错误
      401：无权限
      403：无资源权限
      404：找不到
      400:请求参数错误
  5：服务器

整体代码

import router from '@/router'
import store from '@/store'
import axios from 'axios'
import {
    
     Message } from 'element-ui'

const axiosCreate = axios.create({
    
    
  // 本地接口基地址
  // baseURL: 'http://localhost:3000/api'
  baseURL: process.env.VUE_APP_BASE_URL,
  timeout: 100000000,
  // 是否跨域？
  withCredentials: true
})

// 请求拦截
axiosCreate.interceptors.request.use(function (config) {
    
    
  if (!config.noToken) {
    
    
    config.headers.Authorization = `Bearer ${
      
      store.state.user.token}`
  }
  return config
}, function (error) {
    
    
  return Promise.reject(error)
})


// 响应拦截
axiosCreate.interceptors.response.use((res) => {
    
    
  // 状态码未2开头走res
  if (res.data.success) {
    
    
    return res.data
  } else {
    
    
    console.log('错误信息', res)
    Message.error(res.data.message)
    return Promise.reject(new Error(res.data.message))
  }
  // return res
},
  (error) => {
    
    
    // 错误处理 --> 拦截失效码
    if (error.response && error.response.status === 401) {
    
    
      store.commit('user/LOGOUT')
      Message.error(error.response.data.message)
      router.push('/login')
    }

    // console.dir(error);
    return Promise.reject(error)
  })

// 暴露出去
export default axiosCreate

这样就成功了,我们来实现以下

当我进入页面,修改我们的token,看看会发生什么

自动弹出

总结

(err)=>{
    
    
   if(err.response && err.response.status===401){
    
    
      // 删除token
      // 删除用户信息
      // 提示
      // 跳转路由到登录页
   }
  return Promise.reject(err)
}