1.描述这个技术是做什么？
项目中若前端未对token过期进行处理，token过期后仍然会停留在原页面，用户可以进行一系列的操作。但是由于后端有进行token过期的判断，会造成用户的所有请求报401错误，若前端没有加以控制，会导致用户不明白发生了什么，这时候就需要前端进行处理。同理，当用户的某些请求发生错误，我们也需要把后端返回的文字错误信息展示给用户，而不是仅仅依靠前端进行判断处理，因为同一个错误码可能会出现多种不同原因的错误，前端只能大致进行判断而不太容易对错误原因的区分。由于这两个问题都是在同一个文件里进行操作修改的，所以下面一起总结分析。
2.描述你是如何实现和使用该技术的。
对后端的报错进行控制均在项目中srcutils目录下的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这个文件有了更深的理解。