寫了很多的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中使用