前端无痛刷新的方案

两种方案，第一种记录登录时间，根据后台设置的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 debug
    return 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.data
    console.log(res, 'response.data')
    if (res.code === 1) {
      return res
    } else if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
      const config = response.config
      if (!isRefreshing) {
        isRefreshing = true
        return store.dispatch('user/resetToken').then((res) => {
          const token = res
          config.headers['Authorization'] = token
          config.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'] = token
            resolve(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'] = token
    resolve(config)
}

// 我们要执行fn2，也只需在后面加个括号就可以了
fn2()

// 由于requests是一个数组，所以我们想遍历执行里面的所有的项，所以用上了forEach
requests.forEach(fn => {
  // 执行fn
  fn()
})