Vue+axios（interceptors） 实现http拦截以及全局headers增加token以及签名等严重

引用的各个外部库请自行下载安装 路由文件我就不往外贴了，common.js是下面的那个代码

import Vue from 'vue'
import axios from 'axios'
import router from '@/router'
import qs from 'qs'
import merge from 'lodash/merge'
import { Message } from 'element-ui'
import md5 from 'js-md5'
import { sortObjASCII } from '@/utils/common.js'
const http = axios.create({
  timeout: 1000 * 60,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
  }
})

/**
 * 请求拦截
 */
http.interceptors.request.use(config => {
  var dataSign = sortObjASCII(qs.parse(config.data))
  let timeStr = Date.parse(new Date()) / 1000
  var defaults = {
    'rqquestTime': timeStr,
    'sign': md5(md5(qs.stringify(dataSign) + '&t=' + timeStr + '&46465465464'))
  }
  config.headers['token'] = Vue.cookie.get('token') // 请求头带上token
  config.headers['sign'] = defaults.sign // 签名 按照ASCII码进行排序后的双层md5加密
  config.headers['rqquestTime'] = defaults.rqquestTime // 请求时间
  return config
}, error => {
  return Promise.reject(error)
})

/**
 * 响应拦截
 */
http.interceptors.response.use(response => {
  // console.log(response)
  if (response.data && response.data.code === 401) { // 401, token失效
    Vue.cookie.delete('token')
    router.options.isAddDynamicMenuRoutes = false
    router.push({ name: 'login' })
  }
  if (response.data.code === '-9') {
    Message.error('请先登录')
    setTimeout(() => { // 返回请先登录的状态码 回跳登录
      Vue.cookie.delete('token')
      router.options.isAddDynamicMenuRoutes = false
      router.push({ name: 'login' })
    }, 600)
  }
  if (response.data.code === '-10') {
    Message.error('暂无权限')
    setTimeout(() => { // 返回请先登录的状态码 回跳登录
      router.options.isAddDynamicMenuRoutes = false
      router.push({ name: 'jurisdiction' })
    }, 600)
  }
  return response
}, error => {
  if (error.response.status) {
    switch (error.response.status) {
      // 404请求不存在
      case 404:
        Message.error('服务器被外星人抓走了~')
        setTimeout(() => { // 返回请先登录的状态码 回跳登录
          router.options.isAddDynamicMenuRoutes = false
          router.push({ name: '404' })
        }, 600)
        break
      // 其他错误，直接抛出错误提示
      default:
        Message.error('服务器发生意外错误，错误code：' + error.response.status)
    }
  }
  return Promise.reject(error)
})

/**
 * 请求地址处理
 * @param {*} actionName action方法名称
 */
http.adornUrl = (actionName) => {
  // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
  return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName
}

/**
 * get请求参数处理
 * @param {*} params 参数对象
 * @param {*} openDefultParams 是否开启默认参数?
 */
http.adornParams = (params = {}, openDefultParams = true) => {
  var defaults = {
    // 't': new Date().getTime()
  }
  return openDefultParams ? merge(defaults, params) : params
}

/**
 * post请求数据处理
 * @param {*} data 数据对象
 * @param {*} openDefultdata 是否开启默认数据?
 * @param {*} contentType 数据格式
 *  json: 'application/json; charset=utf-8'
 *  form: 'application/x-www-form-urlencoded; charset=utf-8'
 */
http.adornData = (data = {}, openDefultdata = true, contentType = 'text') => {
  // var dataSign = sort_ASCII(JSON.stringify(data))
  var defaults = {
    // 't': new Date().getTime()
  }
  data = openDefultdata ? merge(defaults, data) : data
  return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
}

/**
 * 向url后加参数
 */
http.addUrlParam = function (url = '', params = {}) {
  if (url && JSON.stringify(params) != '{}') {
    var paramArray = []
    Object.keys(params).forEach(function (key) {
      var param = key + '=' + params[key]
      paramArray.push(param)
    })
    var url2 = encodeURI(url + '?' + paramArray.join('&'))
    var enurl = encodeURI(url2)
    return enurl
  } else {
    return url
  }
}

export default http

common.js自定义的对象排序方法

// 对象重新排序
export function sortObjASCII (obj) {
  var arr = Object.keys(obj).sort()
  if (arr.length === 0) {
    return {}
  }
  var sortObj = {}
  for (var ii in arr) {
    sortObj[arr[ii]] = obj[arr[ii]]
  }
  return sortObj
}

使用方法
在main.js进行注册到原型链上

import Vue from 'vue'

import httpRequest from '@/utils/httpRequest' // api: https://github.com/axios/axios
import axios from 'axios'
import { isAuth } from '@/utils'
import '@/utils/directives.js'
import preview from 'vue-photo-preview'

//自己选取吧
Vue.use(VueCookie)
Vue.use(preview)
Vue.use(VueAreaLinkage)
Vue.config.productionTip = false
// 非生产环境, 适配mockjs模拟数据                 // api: https://github.com/nuysoft/Mock
if (process.env.NODE_ENV !== 'production') {
  require('@/mock')
}

// 挂载全局
Vue.prototype.$http = httpRequest // ajax请求方法；
Vue.prototype.$axios = axios
Vue.prototype.$cookie = VueCookie
Vue.prototype.isAuth = isAuth     // 权限方法




/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

this.$http({
            url: this.$http.adornUrl('/api/xxxx/xxxxx'),
            method: 'post',
            data: this.$http.adornData(this.ruleForm) //参数
          }).then(({ data }) => {//返回值  业务处理
            loading.close()
            if (data.code === '1') {
              this.$message({
                type: 'success',
                message: data.msg
              })
              this.reload()
              this.visible = false
            } else {
              this.$message({
                type: 'error',
                message: data.msg
              })
            }
          })