前端无痛刷新的方案

本文主要是介绍前端无痛刷新的方案，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

两种方案，第一种记录登录时间，根据后台设置的token过期时间，进行在时间内请求更换token
第二种利用axios的拦截，在返回token过期时，那么token去更换token，再用新的token去请求数据。
第二种，上代码

import axios from 'axios'
import { Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'var isRefreshing = false
var requests = []
// create an axios instance
const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,timeout: 5000 // request timeout
})// request interceptor
service.interceptors.request.use(config => {if (store.getters.token) {config.headers['Authorization'] = 'Bearer ' + getToken()}return config},error => {console.log(error) // for debugreturn Promise.reject(error)}
)// response interceptor
service.interceptors.response.use(/*** If you want to get http information such as headers or status* Please return  response => response*//*** Determine the request status by custom code* Here is just an example* You can also judge the status by HTTP Status Code*/response => {const res = response.dataconsole.log(res, 'response.data')if (res.code === 1) {return res} else if (res.code === 50008 || res.code === 50012 || res.code === 50014) {const config = response.configif (!isRefreshing) {isRefreshing = truereturn store.dispatch('user/resetToken').then((res) => {const token = resconfig.headers['Authorization'] = tokenconfig.baseURL = '' // url已经带上了/api，避免出现/api/api的情况requests.forEach(item => item(token))requests = []// 重试当前请求并返回promise// console.log(service(config), 'service(config)')return service(config)}).catch(err => {console.log(err)// console.error('refreshtoken error =>', res)// 刷新token失败，神仙也救不了了，跳转到首页重新登录吧window.location.href = '/'}).finally(() => {isRefreshing = false})} else {return new Promise((resolve) => {// 将resolve放进队列，用一个函数形式来保存，等token刷新后直接执行requests.push((token) => {config.baseURL = ''config.headers['Authorization'] = tokenresolve(service(config))})})}} else {Message({message: res.message,type: 'error',duration: 5 * 1000})return Promise.reject(res)}},error => {return Promise.reject(error)}
)export default service

思路,
当后端返回无权限时，将请求先保存下来，return一个Promise,利用Promise去刷新token,当请求token成功,拿着心得token,拿着存的config，去再次请求，成功后reslove()
这时带来了一个问题，就是当多次请求时,会多次refresh_token
设置一个状态值，用于记录是否正在刷新token。
如果正在刷新token，将其利用Promise，将其封装为一个函数,内部自动调用resolve,存入一个数组，等到刷新token后，执行存入的函数,执行resolve(),然后依次来再次请求数据，返回正确的数据。

// 我们先看一下，定义fn1
function fn1 () {console.log('执行fn1')
}// 执行fn1,只需后面加个括号
fn1()// 回归到我们request数组中，每一项其实存的就是一个类似fn1的一个函数
const fn2 = (token) => {config.headers['X-Token'] = tokenresolve(config)
}// 我们要执行fn2，也只需在后面加个括号就可以了
fn2()// 由于requests是一个数组，所以我们想遍历执行里面的所有的项，所以用上了forEach
requests.forEach(fn => {// 执行fnfn()
})