背景

当token过期时,通常处理方式跳转登录界面,或者重新获取token,并重新发送当前请求

封装axios拦截

axios拦截器当中可重新执行当前axios实例并重新发送当前请求

var instance1= axios.create({
    baseURL: '/api1,
  timeout: 20000
})

// 请求携带token, 无感知刷新token
handleInterceptorToken(instance1)

function handleInterceptorToken(instance)
  instance.interceptors.request.use(config => {
      // 有些接口不需要token,比如登录
    if (config.noToken) return config
    
    // 请求头添加token
    config.headers.Authorization = 'Bearer ' + store.token

    return config
  })
  instance.interceptors.response.use(response => {
    // token过期, 和后端约定状态码
    if (response.status === 401) {
        // 获取新的token
        await store.login()
        // 执行instance,传入config可重新发送请求
        await instance(response.config)
        //返回状态promise,终止当前任务链
        return new Promise(() => {})
    }

    return response
  })
}

 //使用方式
instance({
    url: '/api/get',
    method: 'GET',
    noToken: true  // 不需要token的请求
})