干前端工作也有一小段时间了。这不，研究了下vue项目里的无感刷新。可能有经验的大佬都知道也会敲。大佬就略过吧。
vue无感刷新，大致的原理就是后端返回两个token给前端。（一个是请求的token，另一个是到期或者快到期后换取新token的那个token）
import axios from 'axios'
import { MessageBox, Message } from 'element-ui'//业务请求的接口
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API, timeout: 5000 // request timeout
})//freshToken 就是当前token过期后到后端再次换取新token的接口
const freshToken = axios.create({baseURL: process.env.VUE_APP_BASE_API,timeout: 5000
})
//上面两个 service freshToken 虽然两个都是一样，但是有区别的，下面会用到// 请求前的参数，一般我们的请求头都是在这儿设置
service.interceptors.request.use((config) => {let token = localStorage.getItem("token")config.headers.Authorization = tokenreturn config},(error) => {//请求出错的处理}
)//响应拦截器
service.interceptors.response.use((response) => {//响应成功后的处理（也就是业务请求成功后的处理）},//敲黑板在这儿，重点async(error) => {//首先判断当前token是否过期，如果过期就走下面的if//freshToken函数也就是上面定义的换取新token的接口if (error.response.status == '401') {let newTookenObj = await freshToken({method: 'get',url: '/api/login/getNewToken'})//newTookenObj新的token//这儿还有一个就是换取新token之后，重新保存。return (error.response.config) //记住这儿一定要返回出去，也就是重新走之前请求没走完的业务}}
)export default service
)
)
