Axios的攔截器介紹：

• axios的攔截器原理如下：
  
  image.png
  
  axios攔截器
  axios作為網(wǎng)絡(luò)請求的第三方工具, 可以進行請求和響應(yīng)的攔截
  通過create創(chuàng)建了一個新的axios實例

// 創(chuàng)建了一個新的axios實例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // 超時時間
})

請求攔截器
請求攔截器主要處理 token的統(tǒng)一注入問題

// 請求攔截器
service.interceptors.request.use(async config => {
  // 請求接口  config是請求配置
  // 取token
  if (store.getters.token) {
    // 只要有token 就要檢查token時效性
    if (CheckIsTimeOut()) {
      //  繼續(xù)？
      await store.dispatch('user/lgout')
      router.push('/login') // 跳到登錄
      return Promise.reject(new Error('您的token已經(jīng)失效'))
    }
    // 如果存在token
    config.headers.Authorization = `Bearer ${store.getters.token}`
    // return config
  }
  // 這里一定要注意
  // 一定要return config
  return config
}, error => {
  return Promise.reject(error)
})

處理axios的響應(yīng)攔截器

• 響應(yīng)攔截器主要處理 返回的數(shù)據(jù)異常 和數(shù)據(jù)結(jié)構(gòu)問題

OK，除此之外,axios返回的數(shù)據(jù)中默認增加了一層data的包裹,我們需要在這里處理下
并且,如果執(zhí)行失敗,只是設(shè)置了success為false，并沒有reject，我們需要一并處理下

image.png

// 響應(yīng)攔截器
service.interceptors.response.use(response => {
  // 成功執(zhí)行
  // axios默認加了一層data的包裹
  const { success, message, data } = response.data
  if (success) {
    // 此時認為業(yè)務(wù)執(zhí)行成功了
    return data // 返回用戶所需要的數(shù)據(jù)
  } else {
    // 當(dāng)業(yè)務(wù)失敗的時候
    Message.error(message) // 提示消息
    return Promise.reject(new Error(message))
  }
}, async error => {
  // error 有response對象 config
  if (error.response && error.response.data && error.response.data.code === 10002) {
    // 后端告訴前端token超時了
    await store.dispatch('user/lgout') // 調(diào)用登出action
    router.push('/login') // 跳到登錄頁
  }
  // 失敗
  // Message等同于 this.$message
  Message.error(error.message) // 提示錯誤
  // reject
  return Promise.reject(error) // 傳入一個錯誤的對象  就認為promise執(zhí)行鏈 進入了catch
})
// 檢查token是否過期
function CheckIsTimeOut() {
  // 當(dāng)前時間  - 存儲的時間戳 > 時效性  false   tr
  return (Date.now() - getTimeStamp()) / 1000 > TimeOut
}

處理登錄的返回結(jié)構(gòu)問題

  async login(context, data) {
    // 經(jīng)過響應(yīng)攔截器的處理之后 這里的result實際上就是 token
    const result = await login(data) // 實際上就是一個promise  result就是執(zhí)行的結(jié)果
    // axios默認給數(shù)據(jù)加了一層data
    // 表示登錄接口調(diào)用成功 也就是意味著你的用戶名和密碼是正確的
    // 現(xiàn)在有用戶token
    // actions 修改state 必須通過mutations
    context.commit('setToken', result)
  }

// 導(dǎo)出一個axios的實例  而且這個實例要有請求攔截器 響應(yīng)攔截器
import axios from 'axios'
const service = axios.create() // 創(chuàng)建一個axios的實例
service.interceptors.request.use() // 請求攔截器
service.interceptors.response.use() // 響應(yīng)攔截器
export default service // 導(dǎo)出axios實例