Vue 进阶教程之：Axios配置JWT/封装插件/发送表单数据

本文里使用的示例代码，已测试能正常使用

首先请务必已仔细阅读 Axios 文档并熟悉 JWT：

• 中文文档

• 英文文档

• JWT 中文文档

安装

npm i axios 
npm i es6-promise

为什么要安装 promise polyfill ？虽然 Axios 的 GitHub 主页开头说了支持 IE8，但文档最下面又「偷偷」说，前提是浏览器支持 promise （太鸡贼了），如果你不用关心浏览器兼容，那就不用安装 es6-promise （那你也太幸福了）。

把 Axios 配置成 Vue 插件

用过 vue-resource 的都知道，它本身封装成了 Vue 插件，可以直接在 Vue 组件里使用 this.$http， Axios 本身虽然没有封装，但我们也可以手动把它封装成 Vue 插件。
具体原理请看 Vue框架引入JS库的正确姿势，下面我就用代码演示一下：

AxiosPlugin.js

require('es6-promise').polyfill() // 引入一次就行import axios from 'axios'// 创建 axios 实例// 这里 export  的原因是方便组件外使用 axiosexport const Axios = axios.create({  baseURL: 'xxx', 
  timeout: 5000,
})// 将 Axios 实例添加到Vue的原型对象上export default {
  install(Vue) {    Object.defineProperty(Vue.prototype, '$http', { value: Axios })
  }
}

main.js

import Vue from 'vue'import AxiosPlugin from 'xxx/xxx/AxiosPlugin'Vue.use(AxiosPlugin)

使用 axios 示例

在组件内部

// GET 获取用户信息// http://xxxx/user?a=1&b=2const data = {  params: {    a: 1,    b: 2,
  }
}this.$http.get(url, data).then(res => {  console.log(res)
})// POST  请求const data = {  a: 1,  b: 2,
}this.$http.post(url, data).then(res => {  console.log(res)
})

在组件外部

// POSTimport { Axios } from 'xxx/xxx/AxiosPlugin'Axios.post(url, data)

以上是 Axios 的基本配置，下面我们说一下如何以 x-www-form-urlencoded 格式发送表单数据、设置 JWT 的 token 、以及 token 过期自动登录。

高级配置

废话不多说，直接上完整的代码，伸手党的福利
AxiosPlugin.js

require('es6-promise').polyfill()import axios from 'axios'export const Axios = axios.create({  baseURL:  'http://xxxxx/',  timeout: 10000,
})//POST传参序列化(添加请求拦截器)
 // 在发送请求之前做某件事Axios.interceptors.request.use(config => {    // 设置以 form 表单的形式提交参数，如果以 JSON 的形式提交表单，可忽略
    if(config.method  === 'post'){        // JSON 转换为 FormData
        const formData = new FormData()        Object.keys(config.data).forEach(key => formData.append(key, config.data[key]))
        config.data = formData
    }    // 下面会说在什么时候存储 token
    if (localStorage.token) {   
        config.headers.Authorization = 'JWT ' + localStorage.token
    }    return config
},error =>{
    alert("错误的传参", 'fail')    return Promise.reject(error)
})//返回状态判断(添加响应拦截器)Axios.interceptors.response.use(res =>{   //对响应数据做些事
    if(!res.data.success){
       alert(res.error_msg)       return Promise.reject(res)
    }    return res
}, error => {    if(error.response.status === 401) {      // 401 说明 token 验证失败
      // 可以直接跳转到登录页面，重新登录获取 token
      location.href = '/login'
    } else if (error.response.status === 500) {       // 服务器错误
       // do something
       return Promise.reject(error.response.data)
    }    // 返回 response 里的错误信息
    return Promise.reject(error.response.data)
})export default {
  install(Vue) {    Object.defineProperty(Vue.prototype, '$http', { value: Axios })
  }
}

main.js

import Vue from 'vue'import AxiosPlugin from 'xxx/xxx/AxiosPlugin'Vue.use(AxiosPlugin)

Login.vue

export default {  name: 'Login',
  data() {    return {      username: '',      password: '',
    }
  },  methods: {
    onLogin() {      const { username, password } = this
      const data = {
        username,
        password
      }      this.$http.post('url', data)
        .then(res => {         // 登录成功
          if(res.token) {            // 储存 token
            localStorage.token = res.token
          }
        })
        .catch(error => {          // 登录失败
          // 验证后端返回的错误字段，如果匹配，提示用户
          // axios 配置里必须要 return Promise.reject(error.response.data) 才能拿到错误字段
          if(error.xxx == 'xxx') {
            alert('用户名或密码错误！')
          }
        })
    }
  }
}

以上代码在好几个项目里都正常使用，没有问题
具体还可以参照我写的一个开源项目
vue-shop

作者：Yi罐可乐
链接：https://www.jianshu.com/p/aeaa353da89b