Vue如何调用接口请求头增加参数

import axios from 'axios'
import qs from 'qs'

let api_secret = '935bda53552e49cd56fc'
// 基础配置
if (process.env.node_env === 'production') {
  // axios.defaults.baseurl = 'https://' //线上版本域名
  // api_secret = '84a58d7e0c1c89c4c57b41f4f396a45c' //线上版本秘钥
  axios.defaults.baseurl = 'https://' //开发版本域名
  api_secret = '935bda53552e49cd56' //开发版本秘钥
} else {
  axios.defaults.baseurl = 'https://' //开发版本域名
  api_secret = '935bda53552e49cd56fc' //开发版本秘钥
}
axios.defaults.headers.post = {
  'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
}
axios.defaults.timeout = 10000

let cancel
const promisearr = {}
const canceltoken = axios.canceltoken

axios.interceptors.request.use(
  config => {
    if (process.env.node_env === 'production') {
    //请求头这里加参数这里加参数这里加参数这里加参数这里加参数
      let setsecret = getsecret()
      config.headers['nonce'] = setsecret.nonce
      config.headers['timestamp'] = setsecret.timestamp
      config.headers['signature'] = setsecret.secret
    }

    // 发起请求时，取消掉当前正在进行的相同请求
    if (promisearr[config.url]) {
      // promisearr[config.url]('操作取消')
      promisearr[config.url] = cancel
    } else {
      promisearr[config.url] = cancel
    }

    return config
  },
  error => {
    return promise.reject(error)
  }
)

axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    return promise.resolve(error.response)
  }
)

function checkstatus(response) {
  // loading
  // 如果http状态码正常，则直接返回数据
  if (
    response &&
    (response.status === 200 ||
      response.status === 304 ||
      response.status === 400)
  ) {
    return response
    // 如果不需要除了data之外的数据，可以直接 return response.data
  }
  // 异常状态下，把错误信息返回去
  return {
    status: -404,
    msg: '网络异常'
  }
}

function checkcode(res) {
  // 如果code异常(这里已经包括网络错误，服务器错误，后端抛出的错误)，可以弹出一个错误提示，告诉用户
  if (res.status === -404) {
    console.warn(res.msg)
  }

  return res
}
// 共用方法获取签名
function getsecret() {
  let nonce = getnonce()
  let timestamp = gettimestamp()
  let secret = sha1(api_secret + nonce + timestamp)
  let obj = {
    nonce: nonce,
    timestamp: timestamp,
    secret: secret,
  }
  return obj
}

// 随机字符串
function getnonce() {
  let alphabet = 'qwertyuiopasdfghjklzxcvbnmqwertyuiopasdfghjklzxcvbnm'
  let strlenght = 8 /// 生成的字符串固定长度
  let $num = ''
  for (var i = 0; i < strlenght; i++) {
    $num = $num + alphabet[math.floor(math.random() * alphabet.length)]
  }
  return $num
}

// 时间戳
function gettimestamp() {
  let timestamp = date.parse(new date()) / 1000
  return timestamp
}
// 字符串加密成 hex 字符串
function sha1(s) {
  var data = new uint8array(encodeutf8(s))
  var i, j, t;
  var l = ((data.length + 8) >>> 6 << 4) + 16,
    s = new uint8array(l << 2);
  s.set(new uint8array(data.buffer)), s = new uint32array(s.buffer);
  for (t = new dataview(s.buffer), i = 0; i < l; i++) s[i] = t.getuint32(i << 2);
  s[data.length >> 2] |= 0x80 << (24 - (data.length & 3) * 8);
  s[l - 1] = data.length << 3;
  var w = [],
    f = [
      function () {
        return m[1] & m[2] | ~m[1] & m[3];
      },
      function () {
        return m[1] ^ m[2] ^ m[3];
      },
      function () {
        return m[1] & m[2] | m[1] & m[3] | m[2] & m[3];
      },
      function () {
        return m[1] ^ m[2] ^ m[3];
      }
    ],
    rol = function (n, c) {
      return n << c | n >>> (32 - c);
    },
    k = [1518500249, 1859775393, -1894007588, -899497514],
    m = [1732584193, -271733879, null, null, -1009589776];
  m[2] = ~m[0], m[3] = ~m[1];
  for (i = 0; i < s.length; i += 16) {
    var o = m.slice(0);
    for (j = 0; j < 80; j++)
      w[j] = j < 16 ? s[i + j] : rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1),
      t = rol(m[0], 5) + f[j / 20 | 0]() + m[4] + w[j] + k[j / 20 | 0] | 0,
      m[1] = rol(m[1], 30), m.pop(), m.unshift(t);
    for (j = 0; j < 5; j++) m[j] = m[j] + o[j] | 0;
  };
  t = new dataview(new uint32array(m).buffer);
  for (var i = 0; i < 5; i++) m[i] = t.getuint32(i << 2);

  var hex = array.prototype.map.call(new uint8array(new uint32array(m).buffer), function (e) {
    return (e < 16 ? "0" : "") + e.tostring(16);
  }).join("");

  return hex;
}
// utf8
function encodeutf8(s) {
  var i, r = [],
    c, x;
  for (i = 0; i < s.length; i++)
    if ((c = s.charcodeat(i)) < 0x80) r.push(c);
    else if (c < 0x800) r.push(0xc0 + (c >> 6 & 0x1f), 0x80 + (c & 0x3f));
  else {
    if ((x = c ^ 0xd800) >> 10 == 0) //对四字节utf-16转换为unicode
      c = (x << 10) + (s.charcodeat(++i) ^ 0xdc00) + 0x10000,
      r.push(0xf0 + (c >> 18 & 0x7), 0x80 + (c >> 12 & 0x3f));
    else r.push(0xe0 + (c >> 12 & 0xf));
    r.push(0x80 + (c >> 6 & 0x3f), 0x80 + (c & 0x3f));
  };
  return r;
}

export default {

  post(url, data) {
    return axios({
        method: 'post',
        url,
        data: qs.stringify(data),
        canceltoken: new canceltoken(c => {
          cancel = c
        })
      })
      .then(response => {
        return checkstatus(response)
      })
      .then(res => {
        return checkcode(res)
      })
  },
  postformdata(url, data) {
    return axios({
        method: 'post',
        url,
        data,
        headers: {
          'content-type': 'multipart/form-data'
        }
      })
      .then(response => {
        return checkstatus(response)
      })
      .then(res => {
        return checkcode(res)
      })
  },
  get(url, query) {
    return axios({
      method: 'get',
      url,
      params: query,
      canceltoken: new canceltoken(c => {
        cancel = c
      })
    }).then(response => {
      return checkstatus(response)
    }).then(res => {
      return checkcode(res)
    })
  }
}

// 封装好的接口文件

import axios from 'axios'  // 关键代码
const canceltoken = axios.canceltoken   // 关键代码

//方法传参多加一个 that传进去
export function userloginca(data, that) {
  return request({
    url: 'user/login',
    method: 'post',
    data,
    // 关键代码 canceltoken
    canceltoken: new canceltoken(function executor(c) {
      that.cancel = c
    })   
  })
}

import { userloginca } from '@/api/user'


// 调用 userloginca 方法时除了需要的参数，记得传this进去
    userloginca({
          loginpath: this.logincode.loginpath.ca,
          accounttype: this.logincode.accounttype.nature
        },this)
        .then((res) => {})
        .catch((res) => {})
    }

// 如页面销毁的生命周期
    destroyed() {
        console.log('退出页面')
           this.cancel('请求已取消') // 关键代码
    },