成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

GitChat / 1519人閱讀

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/92991.html

相關(guān)文章

  • 淺談使用 Vue 構(gòu)建前端 10w+ 代碼量的單頁面應(yīng)用開發(fā)底層

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

    rickchen 評(píng)論0 收藏0

  • 淺談使用 Vue 構(gòu)建前端 10w+ 代碼量的單頁面應(yīng)用開發(fā)底層

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

    Backache 評(píng)論0 收藏0

  • Android網(wǎng)絡(luò)編程7之源碼解析OkHttp前篇[請(qǐng)求網(wǎng)絡(luò)]

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

    blastz 評(píng)論0 收藏0

  • vue axios 簡單封裝以及思考

    摘要：先安裝的詳細(xì)介紹以及用法就不多說了請(qǐng)移步下面是簡單的封裝一個(gè)，在此說明這個(gè)方法呢是不一定需要的，根據(jù)個(gè)人的項(xiàng)目需求吧，也可以直接返回，交給后面另行處理也行?；蛘吒鶕?jù)后端返回的狀態(tài)，在里面進(jìn)行處理也行。先安裝 axios npm install axios axios的詳細(xì)介紹以及用法 就不多說了請(qǐng) 移步 github ??? https://github.com/axios/axios ...

    phoenixsky 評(píng)論0 收藏0

  • Vue路由之JWT身份認(rèn)證

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

    he_xd 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<