1.描述這個技術是做什么？
項目中若前端未對token過期進行處理，token過期后仍然會停留在原頁面，用戶可以進行一系列的操作。但是由於后端有進行token過期的判斷，會造成用戶的所有請求報401錯誤，若前端沒有加以控制，會導致用戶不明白發生了什么，這時候就需要前端進行處理。同理，當用戶的某些請求發生錯誤，我們也需要把后端返回的文字錯誤信息展示給用戶，而不是僅僅依靠前端進行判斷處理，因為同一個錯誤碼可能會出現多種不同原因的錯誤，前端只能大致進行判斷而不太容易對錯誤原因的區分。由於這兩個問題都是在同一個文件里進行操作修改的，所以下面一起總結分析。
2.描述你是如何實現和使用該技術的。
對后端的報錯進行控制均在項目中src\utils目錄下的request.js文件中進行處理，token過期也是報錯類型的一種，后面通過判斷語句分別處理。
- 首先在
request.js內導入MessageBox和Message，import { MessageBox, Message } from 'element-ui'
第一個問題：token過期
由於token過期后端統一返回錯誤碼401，所以當error.response.status === 401這個情況時，跳出MessageBox警告，MessageBox.alert是警告框，用戶不可點擊消息提示框之外的界面，當用戶點擊確認或者消息框右上角的x按鈕，則會重新實例化 vue-router 對象后跳轉到登錄界面。
除了這種警告提示框，也能從element-ui的組件庫中挑選其他類型的MessageBox運用在項目的其他地方。詳細內容點擊：Element組件庫message-box
第二個問題：展示后端返回的報錯message
我們團隊項目后的錯誤信息統一返回錯誤碼400，所以只需要在axios請求時的error.response中即可獲取詳細的錯誤信息。但是有一個注意的點在於，之前我們項目一直是展示error.response.message，導致只會出現errError:Request failed with status code 400這句錯誤信息，不懂得如何替換成后端返回的自定義文字信息，后面改成了error.response.data.message就可以成功展示了。除此之外，這個Message.error會“無視”vue文件中調用接口判斷錯誤返回碼的代碼段。例如：
getClubsListData(params).then(response => {
if (response.status === 200) {
this.clubsList = response.data.items
this.total = response.data.totalCount
} else {
return this.$message.error('獲取社團列表失敗') //當出錯時，這句代碼段會被無視，優先展示Message.error的內容
}
})
另外，服務器錯誤碼500也要進行處理，如果直接把服務器的錯誤直接顯示出來，第一對用戶不友好（因為是一大長串報錯的英文），第二也可能泄露一些信息，所以我們統一改成顯示serve error。
- 對返回請求response中的error進行判斷（以下的處理過程在上面均有解釋）：
error => {
if (error.response.status === 400) {
Message.error(error.response.data.message)
} else if (error.response.status === 401) {
MessageBox.alert('你已被登出，請重新登錄', '確定登出', {
confirmButtonText: '確認'
}).then(() => {
store.dispatch('user/resetToken').then(() => {
console.log('push to login')
location.reload()// 為了重新實例化 vue-router 對象，避免 bug
})
})
.catch(action => {
store.dispatch('user/resetToken').then(() => {
console.log('push to login')
location.reload()// 為了重新實例化 vue-router 對象，避免 bug
})
})
} else if (error.response.status === 500) {
Message.error('serve error')
} else {
Message({
message: error.response.data.message,
type: 'error',
duration: 3 * 1000
})
}
}
3.技術使用中遇到的問題和解決過程。
- 技術使用過程中遇到的問題：
由於不同的MessageBox有一定的差別，之前僅使用MessageBox.confirm進行提示，會發現當用戶點擊消息框外的空白處能夠將提示框取消掉，無法強制跳回登錄界面，說明在這種情況下用戶仍然可以進行操作，不利於系統的安全。- 解決過程：
把MessageBox.confirm改成MessageBox.alert就可以解決這個問題，它模擬了系統的alert，無法通過按下ESC或點擊框外關閉。
4.總結
需要對不同類型的組件加以理解，雖然作用大致相同，但是需要在具體使用的時候選擇正確的組件，才能避免錯誤的發生。另外經過了這兩個問題的處理，對
request.js這個文件有了更深的理解。