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

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组件