在Vue網路中請求interceptors，具體該怎麼做？

這篇文章主要介紹了淺談Vue網路請求之interceptors實際應用，現在分享給大家，也給大家做個參考。

專案背景

最近在專案開發中，遇到下面這樣一個問題：

1. 在進行在銘感操作之前，每個請求需要攜帶token,但是token 有有效期，token 失效後需要換取新的token並繼續請求。

需求分析

1. 每個請求都需要攜帶token ，所以我們可以使用axios request 攔截器，在這裡，我們給每個請求都加token,這樣就可以節省每個請求再一次次的複製貼上程式碼。

2. token 失效問題，當我們token 失效，我們服務端會回傳一個特定的錯誤表示，例如token invalid，但是我們不能在每個請求之後去做刷新token 的操作呀，所以這裡我們就用axios response 攔截器，我們統一處理所有請求成功之後響應過來的數據，然後對特殊數據進行處理，其他的正常分發。

功能實作

分析完問題後，我們來實作功能

安裝axios, 這裡我們就贅述怎麼安裝axios.

在main.js 註冊axios

Vue.use(Vuex)
Vue.use(VueAxios, axios)
Vue.use(qs)

註：qs，使用axios，必須得安裝qs，所有的Post 請求，我們都需要qs,對參數進行序列化。

在request 攔截器實作

axios.interceptors.request.use(
 config => {
  config.baseURL = '/api/'
  config.withCredentials = true // 允许携带token ,这个是解决跨域产生的相关问题
  config.timeout = 2500
  let token = sessionStorage.getItem('access_token')
  let csrf = store.getters.csrf
  if (token) {
   config.headers = {
    'access-token': token,
    'Content-Type': 'application/x-www-form-urlencoded'
   }
  }
  if (config.url === 'refresh') {
   config.headers = {
    'refresh-token': sessionStorage.getItem('refresh_token'),
    'Content-Type': 'application/x-www-form-urlencoded'
   }
  }
  return config
 },
 error => {
  return Promise.reject(error)
 }
)

在response 攔截器實作

axios.interceptors.response.use(
 response => {
  // 定时刷新access-token
  if (!response.data.value && response.data.data.message === 'token invalid') {
   // 刷新token
   store.dispatch('refresh').then(response => {
    sessionStorage.setItem('access_token', response.data)
   }).catch(error => {
    throw new Error('token刷新' + error)
   })
  }
  return response
 },
 error => {
  return Promise.reject(error)
 }
)

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

vue實作a標籤點擊高亮方法

Vue-路由導覽功能表列的高亮設定方法

Vue 實作雙向綁定的四個方法

##

以上是在Vue網路中請求interceptors，具體該怎麼做？的詳細內容。更多資訊請關注PHP中文網其他相關文章！