終於解決了如何 使用axios設置session過時的跳轉

一般若是咱們想要使用axios設置過時時的跳轉,咱們的思路是 攔截axios返回的response進行操做。以下官方文檔
clipboard.pngvue

下面即是我再項目中的用法:ios

clipboard.png

其中store和router是引入的vue-router和vuex的實例,用於在非.vue的文件中操做store和router。vue-router

然而,在過時後,不只彈出了過時的提示,還彈出了組件中axios.post調用失敗後catch中的提示。
clipboard.pngvuex

這不是我要的,我就要簡簡單單彈出個過時就完了,不須要其餘亂七八糟的提示。
這是什麼緣由呢,由於上面interceptors.response中的 MessageBox.alert彈框以後,執行了return操做,把response結果返回給了組件中的axios.post。 因此接下來的解決方案就是,我彈框後,不return了axios

clipboard.png

唉,事與願違。仍是不行。和上面同樣的結果,都彈出了兩個框。promise

看來直接return result不行,那麼return一個promise呢,promise中resolved(result)呢?
clipboard.pngpost

clipboard.png
漂亮,和預期同樣( 長舒一口氣)spa

點擊肯定,跳轉到登陸頁面。
clipboard.pngrouter

等等,什麼鬼,爲何又跳出一次? 看來是由於組件中,不只調用一次axios.post, 而是發了好幾個請求。因此每進 一次instance.interceptors.response,都會判斷一下。ip

那咱們讓他彈一次不就好了。

clipboard.png

設置個定時器,這個定時器只進入一次,後面都不會進入。

點擊超時的彈框後,直接跳轉到登陸頁面,再也沒有出現超時彈框,好,完美。
clipboard.png

至此問題解決。

相關文章
相關標籤/搜索