Axios+OAuth2应用场景中应对refresh_token换access_token时拦截器的使用

前端中保存的access_token超时后，一般保存在Redis中的用户信息设置有失效时间，比如我自己设置的10分钟后失效，则，Redis中有2个地方的数据会消失：

这2个地方的数据有相同的失效时间。

 

我们需要在前端请求后拦截返回的401错误，然后自己新建一个请求来使用refresh_token 重新生成access_token的代码如下：

---

import axios from 'axios'
import store from '@/store'
import { Message } from 'element-ui'
import { getToken} from '@/utils/auth'

// create an axios instance
const service = axios.create({
  baseURL: 'http://192.168.0.17:8080', // api的base_url
  timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(config => {
  // Do something before request is sent
  if (getToken()) {
    // 让每个请求携带token-- ['Authorization']
    config.headers['Authorization'] = 'Bearer '+getToken()
    // 处理刷新token后重新请求的自定义变量
    config['refresh_token'] = false
  }
  return config
}, error => {
  Promise.reject(error)
})

// respone interceptor
service.interceptors.response.use(
  //正常返回
  response => response,
  //错误返回
  error =>{
    let response = error.response
    if(response.status === 401 && ! response.config.refresh_token){
         let config = response.config
         // update flag
          config.refresh_token = true
          response = store.dispatch('refresh_token').then(() =>{
                            config.baseURL=''
                            config.headers.Authorization = 'Bearer ' + getToken()
                            return service(config)
                          }).catch((error) =>{
                             store.dispatch('FedLogOut').then(() => {
                               location.reload()// In order to re-instantiate the vue-router object to avoid bugs
                            })
                          })
          return response
    }else{
      Message({
        message: error.message,
        type: 'error',
        duration: 5 * 1000
      })
      return Promise.reject(error)
    }
  }
)
export default service