[ Vue ] 網絡請求之 interceptors 實際應用

GitChat 發布于2019-08-22 14:55 / 1514人閱讀

摘要：需求分析每個請求都需要攜帶，所以我們可以使用攔截器，在這里，我們給每個請求都加這樣就可以節省每個請求再一次次的復制粘貼代碼。

項目背景

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

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

需求分析

每個請求都需要攜帶 token ，所以我們可以使用 axios request 攔截器，在這里，我們給每個請求都加 token,這樣就可以節省每個請求再一次次的復制粘貼代碼。

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)
  }
)

云服務器 GPU云服務器實際應用深度學習實際應用機器學習實際應用云計算的實際應用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92991.html

淺談使用 Vue 構建前端 10w+ 代碼量的單頁面應用開發底層

摘要：其實就是我們開始掛載上去的我們在這里出去，我們就可以在回調里面只處理我們的業務邏輯，而其他如斷網超時服務器出錯等均通過攔截器進行統一處理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 開始之前隨著業務的不斷累積，目前我們 ToC 端主要項目，除去 node_modules， bu...

rickchen 2019-08-22 18:29 評論0 收藏0
淺談使用 Vue 構建前端 10w+ 代碼量的單頁面應用開發底層

摘要：其實就是我們開始掛載上去的我們在這里出去，我們就可以在回調里面只處理我們的業務邏輯，而其他如斷網超時服務器出錯等均通過攔截器進行統一處理。 showImg(https://segmentfault.com/img/remote/1460000015472616?w=845&h=622); 開始之前隨著業務的不斷累積，目前我們 ToC 端主要項目，除去 node_modules， bu...

Backache 2019-08-22 18:29 評論0 收藏0
Android網絡編程7之源碼解析OkHttp前篇[請求網絡]

摘要：異步請求當正在運行的異步請求隊列中的數量小于并且正在運行的請求主機數小于時則把請求加載到中并在線程池中執行，否則就再入到中進行緩存等待。通常情況下攔截器用來添加，移除或者轉換請求或者響應的頭部信息。前言學會了OkHttp3的用法后，我們當然有必要來了解下OkHttp3的源碼，當然現在網上的文章很多，我仍舊希望我這一系列文章篇是最簡潔易懂的。 1.從請求處理開始分析首先OKHttp...

blastz 2019-08-16 10:51 評論0 收藏0
vue axios 簡單封裝以及思考

摘要：先安裝的詳細介紹以及用法就不多說了請移步下面是簡單的封裝一個，在此說明這個方法呢是不一定需要的，根據個人的項目需求吧，也可以直接返回，交給后面另行處理也行。或者根據后端返回的狀態，在里面進行處理也行。先安裝 axios npm install axios axios的詳細介紹以及用法就不多說了請移步 github ??? https://github.com/axios/axios ...

phoenixsky 2019-04-23 13:19 評論0 收藏0
Vue路由之JWT身份認證

摘要：路由之身份認證一身份認證簡介是目前最流行的跨域身份驗證解決方案，相較于機制，服務器就不需要保存任何數據了，也就是說，服務器變成無狀態了，從而比較容易實現擴展。 Vue路由之JWT身份認證一、JWT身份認證簡介 JSON Web Token（JWT）是目前最流行的跨域身份驗證解決方案，相較于session機制，服務器就不需要保存任何 session 數據了，也就是說，服務器變成無狀態...

he_xd 2019-08-26 11:00 評論0 收藏0