响应拦截器作用：

响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。就是在请求结果返回后，先不直接导出，而是先对响应码等等进行处理，处理好后再导出给页面，如果将这个对响应码的处理过程抽出来，就成了所谓的响应拦截器；
 

// 添加响应拦截器
instance1.interceptors.response.use(function (response) {
  return response
}, async function (error) {
  // 如果发生了错误，判断是否是401
  console.dir(error)
  // 开始处理
  return Promise.reject(error)
})

•  响应拦截器解决token过期问题

当发送某一次请求axios后，后台报401错误，可能是tonken过期了或是还没有tonken

• tonken过期：可以使用它去请求一个特殊接口（这个接口是后端指定的，refresh_token），并返回一个新的token回来（有效期还是2小时），以替换过期的token。如果refresh_token也没有了则需要重新登录
• 没有tonken：跳到登录页重新登录

有新token后需要重新刷新vuex

使用新token重新请求axios

import router from '../router/auth.js'


// 响应拦截器
request.interceptors.response.use(function (response) {
  console.log('响应拦截器', response)
  return response
}, async function (error) {
  // 如果发生了错误，判断是否是401
  console.dir(error)
  if (error.response.status === 401) {
    // 开始处理
    console.log('响应拦截器-错误-401')
    const refreshToken = store.state.tokenInfo.refresh_token
    // if (有refresh_token) {
    if (refreshToken) {
      // 1. 请求新token
      try {
        const res = await axios({
          url: 'http://localhost:8000/v1_0/authorizations',
          method: 'PUT',
          headers: {
            Authorization: `Bearer ${refreshToken}`
          }
        })
        console.log('请求新token', res.data.data.token)
        // 2. 保存到vuex
        store.commit('mSetToken', {
          refresh_token: refreshToken,
          token: res.data.data.token
        })
        // 3. 重发请求
        //    request是上面创建的axios的实例，它会自动从vuex取出token带上
        return request(error.config)
      } catch (error) {
        // 清除token
        store.commit('mSetToken', {})
        // 去到登录页(如果有token值，就不能到login)
        const backtoUrl = encodeURIComponent(router.currentRoute.fullPath)
        router.push('/login?backto=' + backtoUrl)
        return Promise.reject(error)
      }
    } else {
      // 去到登录页
      // 清除token
      store.commit('mSetToken', {})
      const backtoUrl = encodeURIComponent(router.currentRoute.fullPath)
      router.push('/login?backto=' + backtoUrl)
      return Promise.reject(error)
    }
  } else {
    return Promise.reject(error)
  }
})

1. router.currentRoute: 表示当前路由对象，如果是在.vue中，就可以用this.$route。

2. 响应拦截器要加在axios实例 request上。

3. 用refresh_token请求新token时，要用axios，不要用实例request

4. 得到新token之后，再发请求时，要用request实例