前端废物的自救之路（1）实现axios拦截器：对Nuxt.js中的@nuxtjs/axios进行封装

前端废物的自救之路（1）实现axios拦截器：对Nuxt.js中的@nuxtjs/axios进行封装

前言

手头有一个去年五月写的遗留项目，以前使用的是Spring Boot+Thymeleaf+AmazeUI（前台）+X-admin（后台），由于用户反映有许多需要改进的地方（并且打开项目一看，那代码我自己也看不懂了，而且以现在的视角看那些代码真的是烂到极致），故进行彻底重构。

由于前台需要SEO，并且考虑到上一版中使用AmazeUI+Thymeleaf开发的体验极为痛苦，且新的后端（Gin）的模板引擎十分恶心（可能有人不这么认为，反正我认为Gin的模板语法比Thymeleaf恶心多了），于是前端选择了Nuxt.js。并且，由于前台对响应式有需求，而且客户认为Vuetify太花哨，iView基础版的组件又不够用，所以UI框架前后台统一使用Ant Design Vue。

注：后端使用的是Gin，并且实现了DDD和CQS。关于这个项目的后端我们过段时间再另行讨论。但是为了解释部分前端代码，这一系列文章中可能也会贴出一些后端代码以供参考。其中前端代码会给出具体的文件名和路径，后端代码会在代码前标识为“后端代码”。

由于网络上使用Nuxt.js+Ant Design Vue的文章实在是太少了，作为一个后端一天能写600+行（以前用Java的时候一天最多甚至能写1200+行），前端一天写100行能工作的代码就满足了的前端废物，为了让以后再写类似的项目的时候能不这么肉疼，于是决定记录下本次开发的过程，不为别的，就为自己以后再用Nuxt和Ant Design Vue的时候少掉几根头发。

虽然这个项目不能开源，但是考虑到以后可能还会做类似的项目，并且类似的解决方案的Demo实在是太少了，所以在这个项目完结后我也会根据我的开发过程整理一个开源的种子项目发布在GitHub上以供参考和使用。

为什么需要axios拦截器？

项目本身是前后端分离的，鉴权使用的是JWT。由于后端是根据请求头中的X-Token字段进行鉴权的，所以需要在每个请求的请求中放入Token。但是我们不可能在每个接口里都这么做，最佳的解决方案当然是利用axios拦截器来完成这个工作。

另外，后端所有的响应无论成功还是失败都具有统一的格式：

后端代码

// @Description 生成一个成功请求的标准响应格式的JSON
// @param data interface{} 响应中要携带的数据
// @return result 生成的JSON
func Success(data interface{
   }) (result gin.H) {
   
	result = gin.H{
   
		"code":    Ok,
		"message": "Success",
		"data":    data,
	}
	return
}

// @Description 生成一个失败请求的标准响应格式的JSON
// @param errorCode ErrorCode 错误码
// @param message string 要显示给用户的错误信息
// @return result 生成的JSON
func Error(errorCode ErrorCode, message string) (result gin.H) {
   
	result = gin.H{
   
		"code":    errorCode,
		"message": message