摘要：寫(xiě)在前面最近在學(xué)習(xí)，遇到有些頁(yè)面請(qǐng)求數(shù)據(jù)需要用戶(hù)登錄權(quán)限服務(wù)器響應(yīng)不符預(yù)期的問(wèn)題，但是總不能每個(gè)頁(yè)面都做多帶帶處理吧，于是想到提供了攔截器這個(gè)好東西，再于是就出現(xiàn)了本文。

最近在學(xué)習(xí)Vue2，遇到有些頁(yè)面請(qǐng)求數(shù)據(jù)需要用戶(hù)登錄權(quán)限、服務(wù)器響應(yīng)不符預(yù)期的問(wèn)題，但是總不能每個(gè)頁(yè)面都做多帶帶處理吧，于是想到axios提供了攔截器這個(gè)好東西，再于是就出現(xiàn)了本文。

用戶(hù)鑒權(quán)與重定向：使用Vue提供的路由導(dǎo)航鉤子

請(qǐng)求數(shù)據(jù)序列化：使用axios提供的請(qǐng)求攔截器

接口報(bào)錯(cuò)信息處理：使用axios提供的響應(yīng)攔截器

路由導(dǎo)航鉤子所有配置均在router/index.js，這里是部分代碼

import Vue from "vue"
import Router from "vue-router"
import { getUserData } from "@/script/localUserData"

const MyAddress = r => require.ensure([], () => r(require("@/views/MyAddress/MyAddress")), "MyAddress")

Vue.use(Router)

const routes = [
  {
    path: "/profile/address",
    name: "MyAddress",
    component: MyAddress,
    meta: {
      title: "我的地址",
      requireAuth: true
    }
  },
  // 更多...
]

const router = new Router({
  mode: "history",
  routes
})

我們主要來(lái)看下面邏輯處理部分的代碼

let indexScrollTop = 0
router.beforeEach((to, from, next) => {
  // 路由進(jìn)入下一個(gè)路由對(duì)象前，判斷是否需要登陸
  // 在路由meta對(duì)象中由個(gè)requireAuth字段，只要此字段為true，必須做鑒權(quán)處理
  if (to.matched.some(res => res.meta.requireAuth)) {
    // userData為存儲(chǔ)在本地的一些用戶(hù)信息
    let userData = getUserData()
    // 未登錄和已經(jīng)登錄的處理
    // getUserData方法處理后如果userData.token沒(méi)有值就是undefined，下面直接判斷
    if (userData.token === undefined) {
      // 執(zhí)行到此處說(shuō)明沒(méi)有登錄，君可按需處理之后再執(zhí)行如下方法去登錄頁(yè)面
      // 我這里沒(méi)有其他處理，直接去了登錄頁(yè)面
      next({
        path: "/login",
        query: {
          redirect: to.path
        }
      })
    } else {
      // 執(zhí)行到說(shuō)明本地存儲(chǔ)有用戶(hù)信息
      // 但是用戶(hù)信息是否過(guò)期還是需要驗(yàn)證一下滴
      let overdueTime = userData.overdueTime
      let nowTime = +new Date
      // 登陸過(guò)期和未過(guò)期
      if (nowTime > overdueTime) {
        // 登錄過(guò)期的處理，君可按需處理之后再執(zhí)行如下方法去登錄頁(yè)面
        // 我這里沒(méi)有其他處理，直接去了登錄頁(yè)面
        next({
          path: "/login",
          query: {
            redirect: to.path
          }
        })
      } else {
        next()
      }
    }
  } else {
    next()
  }
  if (to.path !== "/") {
    indexScrollTop = document.body.scrollTop
  }
  document.title = to.meta.title || document.title
})

router.afterEach(route => {
  if (route.path !== "/") {
    document.body.scrollTop = 0
  } else {
    Vue.nextTick(() => {
      document.body.scrollTop = indexScrollTop
    })
  }
})
export default router

至此，路由鉤子層面的鑒權(quán)處理完畢，不過(guò)細(xì)心的你可能注意到：導(dǎo)航去登錄頁(yè)面調(diào)用的next方法里面有個(gè)query對(duì)象，攜帶了目標(biāo)路由的地址，這是因?yàn)樵诘卿洺晒笪覀冃枰囟ㄏ虻侥繕?biāo)頁(yè)面。

axios所有配置均在件script/getData.js文件，這里是本文件公共代碼部分

import qs from "qs"
import { getUserData } from "@/script/localUserData"
import router from "@/router"
import axios from "axios"
import { AJAX_URL } from "@/config/index"
axios.defaults.baseURL = AJAX_URL

axios請(qǐng)求攔截器代碼

/**
* 請(qǐng)求攔截器，請(qǐng)求發(fā)送之前做些事情
*/
axios.interceptors.request.use(
 config => {
   // POST || PUT || DELETE請(qǐng)求時(shí)先格式化data數(shù)據(jù)
   // 這里需要引入第三方模塊qs
   if (
     config.method.toLocaleUpperCase() === "POST" ||
     config.method.toLocaleUpperCase() === "PUT" ||
     config.method.toLocaleUpperCase() === "DELETE"
   ) {
     config.data = qs.stringify(config.data)
   }
   // 配置Authorization參數(shù)攜帶用戶(hù)token
   let userData = getUserData()
   if (userData.token) {
     config.headers.Authorization = userData.token
   }
   return config
 },
 error => {
   // 此處應(yīng)為彈窗顯示具體錯(cuò)誤信息，因?yàn)槭蔷毷猪?xiàng)目，劣者省略此處
   // 君可自行寫(xiě) || 引入第三方UI框架
   console.error(error)
   return Promise.reject(error)
 }
)

axios響應(yīng)攔截器代碼

/**
 * 響應(yīng)攔截器，請(qǐng)求返回異常統(tǒng)一處理
 */
axios.interceptors.response.use(
  response => {
    // 這段代碼很多場(chǎng)景下沒(méi)用
    if (response.data && response.data.success === false) {
      // 根據(jù)實(shí)際情況的一些處理邏輯...
      return Promise.reject(response)
    }
    return response
  },
  error => {
    // 此處報(bào)錯(cuò)可能因素比較多
    // 1.需要授權(quán)處用戶(hù)還未登錄，因?yàn)槁酚啥斡序?yàn)證是否登陸，此處理論上不會(huì)出現(xiàn)
    // 2.需要授權(quán)處用戶(hù)登登錄過(guò)期
    // 3.請(qǐng)求錯(cuò)誤 4xx
    // 5.服務(wù)器錯(cuò)誤 5xx
    // 關(guān)于鑒權(quán)失敗，與后端約定狀態(tài)碼為500
    switch (error.response.status) {
      case 403:
        // 一些處理...
        break
      case 404:
        // 一些處理...
        break
      case 500:
        let userData = getUserData()
        if (userData.token === undefined) {
          // 此處為未登錄處理
          // 一些處理之后...再去登錄頁(yè)面...
          // router.push({
          //   path: "/login"
          // })
        } else {
          let overdueTime = userData.overdueTime
          let nowTime = +new Date
          if (overdueTime && nowTime > overdueTime) {
            // 此處登錄過(guò)期的處理
            // 一些處理之后...再去登錄頁(yè)面...
            // router.push({
            //   path: "/login"
            // })
          } else {
            // 極端情況，登錄未過(guò)期，但是不知道哪兒錯(cuò)了
            // 按需處理吧...我暴力回到了首頁(yè)
            router.push({
              path: "/"
            })
          }
        }
        break
      case 501:
        // 一些處理...
        break
      default:
        // 狀態(tài)碼辣么多，按需配置...
        break
    }
    return Promise.reject(error)
  }
)

想了解更多關(guān)于axios的信息？請(qǐng)移步這里。

這個(gè)封裝很簡(jiǎn)單，面對(duì)復(fù)雜的業(yè)務(wù)肯定還需要更多的考量，但是對(duì)于一般的小項(xiàng)目或邊緣業(yè)務(wù)也差不多夠用了。最后希望這篇文章能對(duì)有需要的同學(xué)提供一些幫助。