vue后台如何刷新过期的token_前端token过期的处理(基于vue框架)和展示后端报错message...

本文介绍了在Vue项目中如何处理token过期问题,当后端返回401错误码时,弹出警告框并重定向至登录页面。同时,文章讲述了如何展示后端返回的错误信息,特别是400和500错误码的处理,以及为何要避免直接显示500错误信息。此外,还分享了在使用MessageBox组件时遇到的问题及其解决方案。
摘要由CSDN通过智能技术生成

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这个文件有了更深的理解。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值