快捷導(dǎo)航

Vue攔截器原理以及詳細(xì)使用方法

更新時(shí)間：2023年08月19日 12:09:07 作者：-風(fēng)過(guò)無(wú)痕

這篇文章主要給大家介紹了關(guān)于Vue攔截器原理以及詳細(xì)使用的相關(guān)資料,Vue攔截器通常用于在發(fā)送請(qǐng)求或響應(yīng)數(shù)據(jù)時(shí)對(duì)其進(jìn)行一些處理或修改,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下

攔截器原理和作用

首先攔截器在src/utils/request.js 文件中，攔截器分為請(qǐng)求攔截器和響應(yīng)攔截器。
頁(yè)面中的每一個(gè)請(qǐng)求都會(huì)經(jīng)過(guò)請(qǐng)求攔截和響應(yīng)攔截，所以一般在這個(gè)文件進(jìn)行操作。
這一文件一般引入axios，vuex，Message，router 和相關(guān)方法，基地址+攔截器。
請(qǐng)求攔截器：Token的主動(dòng)處理給每一個(gè)請(qǐng)求添加請(qǐng)求頭token 對(duì)請(qǐng)求異常拋出。
響應(yīng)攔截器：簡(jiǎn)化axios默認(rèn)加了一層的data Token被動(dòng)處理對(duì)請(qǐng)求異常拋出。

最簡(jiǎn)化版本

// 導(dǎo)入axios
import axios from 'axios'
// 基地址
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  // 5秒超時(shí)
  timeout: 10000
})
// 請(qǐng)求攔截
request.interceptors.request.use(
  config => {
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
// 響應(yīng)攔截
request.interceptors.response.use(
  res => {
    return res
  },
  // 響應(yīng)錯(cuò)誤的代碼寫這里
  error => {
    return Promise.reject(error)
  }
)
// 暴露副本
export default service

下面是實(shí)際開發(fā)中使用

注意：

當(dāng)我們使用axios時(shí)候，他會(huì)給我們默認(rèn)加一層data。這樣我們?nèi)?shù)據(jù)的時(shí)候就會(huì)比較增加無(wú)效代碼，所以我們可以在數(shù)據(jù)響應(yīng)的時(shí)候判斷，給他人為的去掉一層，如下面判斷 return data ，這樣就可以直接res.data.變量

還有一個(gè)是token 處理這里包含了主動(dòng)處理：登錄時(shí)候存一個(gè)時(shí)間，判斷這個(gè)時(shí)間，超過(guò)就調(diào)用登出方法，提示信息，打回到登錄頁(yè)。被動(dòng)處理：異常的時(shí)候判斷一下，如果是和后端規(guī)定好的token過(guò)期狀態(tài)碼（比如401），就調(diào)用登出方法，提示信息，打回到登錄頁(yè)。

基地址最好不要寫死寫變量名，這樣我們就可以通過(guò)改環(huán)境文件快速更改地址。

// 導(dǎo)入axios
import axios from 'axios'
// 導(dǎo)入提示信息
import { Message } from 'element-ui'
// 導(dǎo)入vuex
import store from '@/store'
// 導(dǎo)入路由
import router from '@/router'
// 導(dǎo)入獲取時(shí)間和token的工具函數(shù)
import { getToken, getTokenTime } from '@/utils/auth'
// 基地址
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  // 5秒超時(shí)
  timeout: 10000
})
// 請(qǐng)求攔截
// 添加一個(gè)service的請(qǐng)求攔截器
service.interceptors.request.use(
  async config => {
    // config就是本次發(fā)請(qǐng)求的信息
    // 判斷有沒有token
    if (store.state.user.token) {
      // token失效的主動(dòng)處理
      // 獲取一下記錄token的時(shí)間
      let start = getTokenTime()
      // 獲取一下當(dāng)前時(shí)間
      let now = Date.now()
      // 算出時(shí)間差
      let hour = (now - start) / 1000 / 3600
      // 判斷是否超過(guò)1小時(shí)
       if (hour >= 1) {
         // 代表token過(guò)期
         await store.dispatch('user/logout')
         Message.error('token已過(guò)期,請(qǐng)重新登錄')
         router.push('/login')
      // return代表不往下執(zhí)行，所以這個(gè)請(qǐng)求不會(huì)發(fā)送
         return
       }
       config.headers.Authorization = 'Bearer ' + getToken()
      config.headers['Bearer'] = getToken()
      // config.headers.tenantid =  getTenantId ()
    }
    // 發(fā)送請(qǐng)求
    return config
  },
  error => {
    return Promise.reject(error)
  }
)
// 響應(yīng)攔截
service.interceptors.response.use(
  res => {
    // axios默認(rèn)加了一層data
    // 這個(gè)res包括這個(gè)請(qǐng)求響應(yīng)回來(lái)的所有信息
    // 所有的接口請(qǐng)求都會(huì)回到這里
    // 獲取到本次請(qǐng)求得到的數(shù)據(jù)
    const data = res.data
    // 會(huì)幫所有的請(qǐng)求打印
    // console.log(data);
    // 判斷本次請(qǐng)求是否成功
    if (data.code === 200 || data.code == 0) {
      // 如果響應(yīng)成功，則正常給他返回?cái)?shù)據(jù)
      return data
    } else {
      // 證明失敗，我們需要讓外面的catch被調(diào)用
      // 要讓catch被調(diào)用，就要手動(dòng)拋出一個(gè)錯(cuò)誤，并把服務(wù)器返回的消息拋回去
      Message.warning(data.message || data.msg)
      return Promise.reject(data.message)
    }
  },
  async error => {
    // token失效的被動(dòng)處理
    console.log(error)
    if (error.response.data.code === 401) {
      await store.dispatch('user/logout')
      Message.warning('登錄狀態(tài)過(guò)期，請(qǐng)重新登錄！')
      router.push('/login')
    } else {
      return Promise.reject(error)
    }
  }
  // error => {
  //   return Promise.reject(error)
  // }
)
// 暴露副本
export default service

瀏覽器存取