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开头走resif (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)
}