vue請求攔截


寫了很多的vue項目,經常碰到需要做請求攔截的情況,從發請求前的token判斷到對返回信息的響應,我自己在不同的階段是用不同的方式處理的。

入門階段

記得當時做的第一個項目,是需要在請求頭部加入登錄是獲取到的token,每個接口都需要,因此就有了下面的代碼:

每次請求前,拿到token,再封裝到頭部信息中,再傳遞給后台。

公共方法

后來,需求升級了,在請求前需要判斷token是否存在,是否過期;在后台返回結果后,需要根據不同的返回狀態的給出不同的提示。當時,項目基本上都已經寫完了,幾十個接口,每個接口請求前后都要添加一個方法,感覺超級麻煩額,為了偷懶,我竟然神奇的想到了使用全局方法。

先在main.js中定義兩個全局然后在每個請求前后分別調用這兩個全局方法,我真的是每個請求都有加:

請求攔截

 大概是半年后吧,自我感覺能比較熟練的使用vue做項目了,才想起來認真看一下官方文檔,這個才發現了有請求攔截這么好用的東東。。。

一直都是用的axios,之前都是直接在main.js中引入

現在要做請求攔截,所以先在新建一個http.js文件,然后在http.js中引入axios然后暴露出去,再到main.js中引入http.js:

http.js

main.js

再回到http.js中,因為我這里用到了一些其他的東西,比如后台地址變量sessiondate.add、本地存儲的token,所以在前面還引入了一些其他的東西

 

現在開始寫請求前的攔截:判斷是否有token,如果有,將token存入請求頭部:

這樣,在后面每次請求的時候,不用再獲取token什么的了。

接下來就是寫對返回結果的響應了:

一次性處理多種情況,簡單省事。

上面的方式是token存儲在cookie里面,但是也有很多時候,token是存在vuex里面的,然后在vuex里面再講token存在本地:

存儲

在http.js中使用

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM