注意目錄和修改相同的字符編碼

vue項(xiàng)目中如何解決出現(xiàn)兩次重新登錄彈框的問題？

舉例描述一下業(yè)務(wù)場(chǎng)景：當(dāng)token過期，需要用戶重新登錄時(shí)，需要在頁面彈框提示重新登錄。

顯然這個(gè)重新登錄的提示彈框的邏輯是在響應(yīng)攔截器中加的，我的代碼如下：（只提供部分代碼）

 1 // 返回?cái)r截器
 2 service.interceptors.response.use(
 3     response => {
 4         if (response.data.status === -1) {
 5             Message({
 6                 message: response.data.message,
 7                 type: 'error',
 8                 duration: 3 * 1000
 9             })
10         }
11         if (response.headers['content-disposition']) {
12             return response
13         }
14         return response.data
15     },
16     error => {
17         if (error && error.response) {   
19             switch (error.response.status) {
20                 case 401:
21                     if (error.response.data.code) {
23                         MessageBox.confirm(error.response.data.errors || 'Error', '確定重新登錄', {
24                             confirmButtonText: '確定',
25                             type: 'warning'
26                         }).then(() => {
27                             store.dispatch('user/resetToken').then(() => {
29                                 router.push('/login')
30                             })
31                         })
33                     }
34                     break;48             }
49         } else {
50             // error.message = '連接失敗...'
51         }
52         return Promise.reject(error)
53     }
54 )

問題詳細(xì)描述：當(dāng)在token過期的頁面如果同時(shí)發(fā)出多個(gè)請(qǐng)求時(shí)，就會(huì)對(duì)應(yīng)出現(xiàn)多個(gè)彈框（注意：我這里用的是elementui提供的messageBox，故彈框是在觸發(fā)確認(rèn)或取消按鈕按照順序彈出的。）

這樣的展示顯示用戶體驗(yàn)效果不好，當(dāng)401時(shí)應(yīng)該出現(xiàn)一次彈框，點(diǎn)擊確認(rèn)直接進(jìn)入登錄頁，不需要再出現(xiàn)多余的彈框。那這個(gè)問題如何修改呢？

解決方法：

加一個(gè)全局變量flag，用來標(biāo)識(shí)記錄是否觸發(fā)過messageBox中的按鈕。false是未出現(xiàn)過彈框，true代表出現(xiàn)過一次。在做switch匹配前判斷flag是否為true，是則中斷執(zhí)行，否則繼續(xù)執(zhí)行，執(zhí)行完messageBox代碼后，需要將flag設(shè)為true，且需要注意此時(shí)還要加個(gè)定時(shí)器還原flag的初始值為false。因?yàn)槿∠笕绻话裦lag還原，則不會(huì)再出現(xiàn)提示彈框。以下是代碼：

 1 let flag = false
 3 // 返回?cái)r截器
 4 service.interceptors.response.use(
 5    ...
 6     error => {
 7         if (error && error.response) {
 8             if (flag) return
 9             switch (error.response.status) {
10                 case 401:
11                     if (error.response.data.code) {
13                         MessageBox.confirm(error.response.data.errors || 'Error', '確定重新登錄', {
14                             confirmButtonText: '確定',
15                             type: 'warning'
16                         }).then(() => {
17                             store.dispatch('user/resetToken').then(() => {
18                                 // location.reload()
19                                 router.push('/login')
20                             })
21                         })
　　　　　　　　　　　　　　　　flag = true　　　　　　　　
22                         setTimeout(() => {
23                             flag = false
24                         }, 2000);
25                     }
26                     break;
27                 ...
28             }
29         } else {
30             // error.message = '連接失敗...'
31         }
32         return Promise.reject(error)
33     }
34 )

posted @ 2023-11-19 20:06 黑使閱讀(768) 評(píng)論(0) 收藏舉報(bào)

刷新頁面返回頂部

黑使

black girl！

vue項(xiàng)目中如何解決出現(xiàn)兩次重新登錄彈框的問題？

公告

黑使

black girl！

vue項(xiàng)目中如何解決出現(xiàn)兩次重新登錄彈框的問題？

公告

black girl！

vue項(xiàng)目中如何解決出現(xiàn)兩次重新登錄彈框的問題？