2. // import axios from 'axios'
  3. // // 配置基地址
  4. // const request = axios.create({
  5. //   baseURL: 'http://toutiao-app.itheima.net'
  6. // })
  7. // // request2可以按需的导出
  8. // export const request2 = axios.create({
  9. //   baseURL: 'http://toutiao-app.itheima2.net2'
  10. // })
  11. // // 默认导出request
  12. // export default request
  14. import axios from 'axios'
  15. // 在普通的js文件中
  16. import store from '../store/index'
  17. // import router from '../router/auth'
  18. import router from '../router/auth'
  19. const request = axios.create({
  20.   baseURL: 'http://localhost:8000'
  21.   // baseURL: 'http://192.168.15.138:8000'
  22.   // baseURL: 'http://192.168.15.28:8000'
  24. })
  25. // 请求拦截器
  26. request.interceptors.request.use(config => {
  27.   // config就是本次请求用到的配置项
  29.   const token = store.state.tokenInfo.token
  30.   if (token) {
  31.     // 看看有没有token，只要有token，就加上token，也就是就传递token
  32.     config.headers.Authorization = `Bearer ${token}`
  33.   }
  34.   return config
  35. }, function (error) {
  36.   // 对请求错误做些什么
  37.   return Promise.reject(error)
  38. })
  40. // 响应拦截器
  41. request.interceptors.response.use(response => {
  42.   return response
  43. }, async function (error) {
  44.   // 如果发生了错误，判断是否是401（401就是token错误或者token失效了）
  45.   console.dir(error)
  46.   if (error.response.status === 401) {
  47.     const refreshToken = store.state.tokenInfo.refresh_token
  48.     if (refreshToken) {
  49.       // 有的话请求新token
  50.       try {
  51.         const res = await axios({
  52.           // 把地址写全是不用request有个请求拦截器（如果走请求拦击器就会补充一个错的token）了
  53.           url: 'http://localhost:8000/v1_0/authorizations',
  54.           method: 'PUT',
  55.           headers: {
  56.             Authorization: `Bearer ${refreshToken}`
  57.           }
  58.         })
  59.         console.log(res)
  60.         // 把新token保存到vuex中
  61.         const newToken = res.data.data.token
  62.         store.commit('mSetToken', { token: newToken, refresh_token: refreshToken })
  63.         // error.config里面就保留着上次请求的所有参数，调用request请求就行
  64.         return request(error.config)
  65.       } catch (err) {
  66.         // 1. 清空token
  67.         store.commit('mSetToken', {})
  68.         // 2. 回去登陆
  69.         router.push('/login?backto=' + encodeURIComponent(router.currentRoute.fullPath))
  70.         // 3. 返回错误信息
  71.         return Promise.reject(new Error('请求新token失败'))
  72.       }
  73.     } else {
  74.       // 1. 清空token
  75.       store.commit('mSetToken', {})
  76.       // 2. 回去登陆, 带上要返回的地址
  77.        // router.currentRoute.fullPath// 获取到之前访问的路由地址
  78.       router.push('/login?backto=' + encodeURIComponent(router.currentRoute.fullPath))
  79.       // 3. 返回错误信息
  80.       return Promise.reject(new Error('refresh_token不存在'))
  81.     }
  82.   }
  83. })
  85. // moudle.exports也是按需导出，但是一个页面中moudle.exports按需导出的时候
  86. // exports按需导出就不管用了
  87. // export是按需导出。注意导入按需导出的时候，需要用{}接收
  88. // export const request2 = axios.create({
  89. //   baseURL: 'http://toutiao-app.itheima2.net2'
  90. // })
  92. // 默认导出一个页面只能有一个默认导出
  93. export default request

这个时候在api页面中导入request发axios的时候，就已经有请求和响应拦截器的功能了

正常情况下的请求拦截器

响应拦截器，中除了后端返回的有效数据，其他的都是axios给返回的