快捷導(dǎo)航

Vue攔截器原理以及詳細使用方法

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

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

攔截器原理和作用

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

最簡化版本

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

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

注意：

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

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

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

瀏覽器存取