淺談Vue網(wǎng)絡(luò)請(qǐng)求之interceptors實(shí)際應(yīng)用

更新時(shí)間：2018年02月28日 11:22:25 作者：_DangJin

這篇文章主要介紹了淺談Vue網(wǎng)絡(luò)請(qǐng)求之interceptors實(shí)際應(yīng)用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

項(xiàng)目背景

最近在項(xiàng)目開發(fā)中，遇到下面這樣一個(gè)問題：

在進(jìn)行銘感操作之前，每個(gè)請(qǐng)求需要攜帶token,但是token 有有效期，token 失效后需要換取新的token并繼續(xù)請(qǐng)求。

需求分析

每個(gè)請(qǐng)求都需要攜帶 token ，所以我們可以使用 axios request 攔截器，在這里，我們給每個(gè)請(qǐng)求都加 token,這樣就可以節(jié)省每個(gè)請(qǐng)求再一次次的復(fù)制粘貼代碼。
token 失效問題，當(dāng)我們token 失效，我們服務(wù)端會(huì)返回一個(gè)特定的錯(cuò)誤表示，比如 token invalid，但是我們不能在每個(gè)請(qǐng)求之后去做刷新 token 的操作呀，所以這里我們就用 axios response 攔截器，我們統(tǒng)一處理所有請(qǐng)求成功之后響應(yīng)過來的數(shù)據(jù)，然后對(duì)特殊數(shù)據(jù)進(jìn)行處理，其他的正常分發(fā)。

功能實(shí)現(xiàn)

分析完問題后，我們來實(shí)現(xiàn)功能

安裝axios, 這里我們就贅述怎么安裝axios.

在 main.js 注冊(cè) axios

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

注：qs，使用axios，必須得安裝 qs，所有的Post 請(qǐng)求，我們都需要 qs,對(duì)參數(shù)進(jìn)行序列化。

在 request 攔截器實(shí)現(xiàn)

axios.interceptors.request.use(
 config => {
  config.baseURL = '/api/'
  config.withCredentials = true // 允許攜帶token ,這個(gè)是解決跨域產(chǎn)生的相關(guān)問題
  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 攔截器實(shí)現(xiàn)

axios.interceptors.response.use(
 response => {
  // 定時(shí)刷新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)
 }
)

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: