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

Bertha 。 2022-04-02 16:58 227阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpNTc1NTYzMTkx_size_16_color_FFFFFF_t_70][]

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

![20181227140252942.png][]![20181227140325448.png][]

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

--------------------

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpNTc1NTYzMTkx_size_16_color_FFFFFF_t_70 1][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpNTc1NTYzMTkx_size_16_color_FFFFFF_t_70]: /images/20220402/7930ee75ca01405aa6e3ccdb84dba87e.png
[20181227140252942.png]: https://img-blog.csdnimg.cn/20181227140252942.png
[20181227140325448.png]: /images/20220402/2e490db2c2744ee0ac018dabdb1622ba.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpNTc1NTYzMTkx_size_16_color_FFFFFF_t_70 1]: /images/20220402/2e96c98ee255416db7ff5c789db258dc.png