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