vue接口请求加密

版权声明：未经本人同意不得转载 一切法律责任 后果自负 https://blog.csdn.net/xy19950125/article/details/83861156

1. 安装vue项目  npm init webpack project

2 安装iview npm i iview --save (这里是结合iview框架使用的 可根据自己的需求安装 当然也可以不安装)

3 在src目录下建一个utils文件夹 里面需要放5个js 都是封装好的js文件 功能不仅仅局限于加密 可以研究一下 你会学到很多东西

   1.api.js

/**
 * 为vue实例添加http方法
 * Vue.use(http)
 */
import http from './http'

export default {
  /**
   * install钩子
   * @param {Vue} Vue Vue
   */
  install (Vue) {
    Vue.prototype.http = http
  }
}

2. filters.js

// 公共使用的filters
import Vue from 'vue';
import {getTime, getPrdType} from '../utils/time';


// 区分支付方式的filter
Vue.filter('paywayType', function (value) {
    return value;
});

// 时间
Vue.filter('newdate', function (value) {
    return getTime(value);
});
// 时间-分钟
Vue.filter('minute', function (str, n) {
    const num = parseInt(n);
    return str.split(' ')[num];
});
// 分割以：连接多个参数的string
Vue.filter('valStr', function (str, n) {
    const num = parseInt(n);
    return str.split(':')[num];
});
// 根据提供时间计算倒计时
Vue.filter('countDown', function (str) {
    const dateStr = new Date(str).getTime();
    const timeNow = new Date().getTime();
    const countDown = dateStr - timeNow;
    const countDownDay = Math.floor((dateStr - timeNow) / 86400000);// 计算剩余天数
    const countDownHour = Math.floor((dateStr - timeNow) / 3600000 % 24);// 计算剩余小时
    const countDownMin = Math.floor((dateStr - timeNow) / 60000 % 60);// 计算剩余分钟
    // const countDownSec = Math.floor((dateStr - timeNow) / 1000 % 60);// 计算剩余秒
    if (countDown <= 0) {
        return '- - - -';
    } else {
        return countDownDay + '天' + countDownHour + '小时' + countDownMin + '分钟';
    }
});
// 取绝对值
Vue.filter('numberFn', function (numberStr) {
    return Math.abs(numberStr);
});
// 处理图片地址的filter
Vue.filter('imgSrc', function (src) {
    const env = getPrdType();
    switch (env) {
        case 'pre':
            return `https://preres.bldz.com/${src}`;
        case 'pro':
            return `https://res.bldz.com/${src}`;
        case 'test':
        default:
            return `https://testimg.bldz.com/${src}`;
    }
});
// 直接转化剩余时间
Vue.filter('dateShow', function (dateStr) {
    const countDownDay = Math.floor(dateStr / 86400);// 计算剩余天数
    const countDownHour = Math.floor(dateStr / 3600 % 24);// 计算剩余小时
    const countDownMin = Math.floor(dateStr / 60 % 60);// 计算剩余分钟
    // const countDownSec = Math.floor((dateStr - timeNow) / 1000 % 60);// 计算剩余秒
    if (dateStr <= 0) {
        return '- - - -';
    } else if (countDownDay <= 0 && countDownHour <= 0) {
        return countDownMin + '分钟';
    } else if (countDownDay <= 0) {
        return countDownHour + '小时' + countDownMin + '分钟';
    } else {
        return countDownDay + '天' + countDownHour + '小时' + countDownMin + '分钟';
    }
});
// 处理图片
Vue.filter('imgLazy', function (src) {
    return {
        src,
        error: '../static/images/load-failure.png',
        loading: '../static/images/default-picture.png'
    };
});
Vue.filter('imgHandler', function (src) {
    return src.replace(/,jpg/g, '.jpg');
});

3.http.js

import axios from 'axios'
import utils from '../utils/utils'
import {Modal} from 'iview'
// import qs from 'qs';
axios.defaults.timeout = 1000*60
axios.defaults.baseURL = ''
const defaultHeaders = {
  Accept: 'application/json, text/plain, */*; charset=utf-8',
  'Content-Type': 'application/json; charset=utf-8',
  Pragma: 'no-cache',
  'Cache-Control': 'no-cache'
}
// 设置默认头
Object.assign(axios.defaults.headers.common, defaultHeaders)

const methods = ['get', 'post', 'put', 'delete']

const http = {}
methods.forEach(method => {
  http[method] = axios[method].bind(axios)
})
export default http
export const addRequestInterceptor =
  axios.interceptors.request.use.bind(axios.interceptors.request)
// request前自动添加api配置
addRequestInterceptor(
  (config) => {
    if (utils.getlocal('token')) {
      // 判断是否存在token，如果存在的话，则每个http header都加上token
      config.headers.Authentication = utils.getlocal('token')
    }
    // config.url = `/api${config.url}`
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

export const addResponseInterceptor =
axios.interceptors.response.use.bind(axios.interceptors.response)
addResponseInterceptor(
  (response) => {
    // 在这里统一前置处理请求响应
    if (Number(response.status) === 200) {
      // 全局notify有问题，还是自己处理吧
      // return Promise.reject(response.data)
      // window.location.href = './'
      // this.$router.push({ path: './' })
    }
    return Promise.resolve(response.data)
  },
  (error) => {
    if (error.response) {
      const title = '温馨提示';
      const content = '<p>登录过期请重新登录</p>'     
      switch (error.response.status) {
        case 401:
          // 返回 401 跳转到登录页面       
          Modal.error({
            title: title,
            content: content,
            onOk: () => {
              localStorage.removeItem("lefthidden")
              localStorage.removeItem("leftlist")
              localStorage.removeItem("token")
              localStorage.removeItem("userInfo")
              localStorage.removeItem("headace")
              localStorage.removeItem("sideleft")
              utils.delCookie("user");
              window.location.href = './'
          }
        })
          break
      }
    }
    return Promise.reject(error || '出错了')
  }
)

4. time.js

// 常用的工具api

const test = 'test';
const pre = 'pre';
const pro = 'pro';

export function judeType (param, typeString) {
    if (Object.prototype.toString.call(param) === typeString) return true;
    return false;
};

export function isPrd () {
    return process.env.NODE_ENV === 'production';
};

export function getPrdType () {
    return ENV;
};

export const ls = {
    put (key, value) {
        if (!key || !value) return;
        window.localStorage[key] = JSON.stringify(value);
    },
    get (key) {
        if (!key) return null;
        const tem = window.localStorage[key];
        if (!tem) return null;
        return JSON.parse(tem);
    },
    // 设置cookie
    setCookie (key, value, time) {
        if (time) {
            let date = new Date();
            date.setDate(date.getDate() + time);
            document.cookie = key + '=' + value + ';expires=' + date.toGMTString() + ';path=/';
        } else {
            document.cookie = key + '=' + value + ';path=/';
        }
    },
    // 获取cookie
    getCookie (key) {
        let array = document.cookie.split('; ');
        array.map(val => {
            let [valKey, value] = val.split('=');
            if (valKey === key) {
                return decodeURI(value);
            }
        });
        return '';
    }
};

/**
 * 判断元素有没有该class
 * @param {*} el
 * @param {*} className
 */

export function hasClass (el, className) {
    let reg = new RegExp('(^|\\s)' + className + '(\\s|$)');
    return reg.test(el.className);
}
/**
 * 为元素添加class
 * @param {*} el
 * @param {*} className
 */
export function addClass (el, className) {
    if (hasClass(el, className)) return;
    let newClass = el.className.spilt(' ');
    newClass.push(className);
    el.className = newClass.join(' ');
}

export function removeClass (el, className) {
    if (!hasClass(el, className)) return;

    let reg = new RegExp('(^|\\s)' + className + '(\\s|$)', 'g');
    el.className = el.className.replace(reg, ' ');
}

/**
 * 将数据存储在标签里
 * @param {*} el
 * @param {*} name
 * @param {*} val
 */
export function getData (el, name, val) {
    let prefix = 'data-';
    if (val) {
        return el.setAttribute(prefix + name, val);
    }
    return el.getAttribute(prefix + name);
}

export function isIphone () {
    return window.navigator.appVersion.match(/iphone/gi);
}

/**
 * 计算元素和视窗的位置关系
 * @param {*} el
 */
export function getRect (el) {
    if (el instanceof window.SVGElement) {
        let rect = el.getBoundingClientRect();
        return {
            top: rect.top,
            left: rect.left,
            width: rect.width,
            height: rect.height
        };
    } else {
        return {
            top: el.offsetTop,
            left: el.offsetLeft,
            width: el.offsetWidth,
            height: el.offsetHeight
        };
    }
}

/**
 * 获取不确定数据的方法api
 * @param {Array} p 参数数组
 * @param {Object} o 对象
 */
export function getIn (p, o) {
    return p.reduce(function (xs, x) {
        return (xs && xs[x]) ? xs[x] : null;
    }, o);
}

/**
 * 时间戳改为年月日格式时间
 * @param {*} p 时间戳
 */
export function getTime (p) {
    let myDate = new Date(p);
    let year = myDate.getFullYear();
    let month = myDate.getMonth() + 1;
    let date = myDate.getDate();
    if (month >= 10) {
        month = '' + month;
    } else {
        month = '0' + month;
    }

    if (date >= 10) {
        date = '' + date;
    } else {
        date = '0' + date;
    }
    return year + '-' + month + '-' + date;
}

export function debounce (method, delay) {
    let timer = null;
    return function () {
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            method.apply(context, args);
        }, delay);
    };
}

5 utils.js

// 获取cookie、
export function getCookie (name) {
  if (document.cookie.length > 0){
    let c_start = document.cookie.indexOf(name + '=')
    if (c_start != -1) { 
      c_start = c_start + name.length + 1 
      let c_end = document.cookie.indexOf(';', c_start)
      if (c_end == -1) c_end = document.cookie.length
      return unescape(document.cookie.substring(c_start, c_end))
    }
  }
  return ''
}
// 设置cookie,增加到vue实例方便全局调用
export function setCookie (cname, value, expiredays) {
  let exdate = new Date()
  exdate.setDate(exdate.getDate() + expiredays)
  document.cookie = cname + '=' + escape(value) + ((expiredays == null) ? '' : ';expires=' + exdate.toGMTString())
}
// 删除cookie
export function delCookie (name) {
  let exp = new Date()
  exp.setTime(exp.getTime() - 1)
  let cval = getCookie(name)
  if (cval != null) {
    document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString()
  }
}
// 设置localstorage
export function putlocal (key, value) {
  if (!key || !value) return
  window.localStorage[key] = JSON.stringify(value)
}
// 获取localstorage
export function getlocal (key) {
  if (!key) return null
  const tem = window.localStorage[key]
  if (!tem) return null
  return JSON.parse(tem)
}
/**
 * use_iframe_download function - 通过 iframe 下载文件
 *
 * @param  {String} download_path 需下载文件的链接
 * @return {Void}
 */
export const use_iframe_download = download_path => {
  const $iframe = document.createElement('iframe')

  $iframe.style.height = '0px'
  $iframe.style.width = '0px'
  document.body.appendChild($iframe)
  $iframe.setAttribute('src', download_path)

  setTimeout(function () { $iframe.remove() }, 20000)
}

function requestTimeout (xhr) {
  const timer = setTimeout(() => {
    timer && clearTimeout(timer)
    xhr.abort()
  }, 5000)
  return timer
}
// 导出
export function exporttable (httpUrl,token, formData, callback) {
let i = formData.entries();
  let param = "?Authentication="+token;
  do{
    var v = i.next();
    if(!v.done){
      param+="&"+v.value[0]+"="+v.value[1];     
    }
    
  }while(!v.done);
//   console.log(param);
window.open(httpUrl+param)
// var xhr = new XMLHttpRequest()
// if (xhr.withCredentials === undefined){ 
// return false
// };
// xhr.open("post", httpUrl)
// // xhr.timeout=5000
// xhr.setRequestHeader("Authentication", token)
// xhr.responseType = "blob"
// let timer = requestTimeout(xhr)
// xhr.onreadystatechange = function () {
// timer && clearTimeout(timer)
// if (xhr.readyState !== 4) {
// timer = requestTimeout(xhr)
// return
// }
// if (this.status === 200) {
// var blob = this.response
// var contentType = this.getResponseHeader('content-type')
// var fileName = contentType.split(";")[1].split("=")[1]
// fileName = decodeURI(fileName)
// let aTag = document.createElement('a')
// // 下载的文件名
// aTag.download = fileName
// aTag.href = URL.createObjectURL(blob)
// aTag.click()
// URL.revokeObjectURL(blob)
callback && callback(true)
// } else {
// callback && callback(false)
// } 
// }
// xhr.send(formData);
}

// 获取当前时间
export function getNowFormatDate() {
  var date = new Date();
  var seperator1 = "-";
  var seperator2 = ":";
  var month = date.getMonth() + 1;
  var strDate = date.getDate();
  if (month >= 1 && month <= 9) {
      month = "0" + month;
  }
  if (strDate >= 0 && strDate <= 9) {
      strDate = "0" + strDate;
  }
  var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
          + " " + date.getHours() + seperator2 + date.getMinutes()
          + seperator2 + date.getSeconds();
          
  return currentdate;
}

// 时间格式化
export function formatDate(date, fmt) {
  if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
  }
  let o = {
      'M+': date.getMonth() + 1,
      'd+': date.getDate(),
      'h+': date.getHours(),
      'm+': date.getMinutes(),
      's+': date.getSeconds()
  };
  for (let k in o) {
      if (new RegExp(`(${k})`).test(fmt)) {
          let str = o[k] + '';
          fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : padLeftZero(str));
      }
  }
  return fmt;
};

function padLeftZero(str) {
  return ('00' + str).substr(str.length);
}
export default {
  getCookie,
  setCookie,
  delCookie,
  putlocal,
  getlocal,
  exporttable,
  getNowFormatDate,
  formatDate
}

4.配置main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import VueRouter from 'vue-router';
import iView from 'iview';
import 'iview/dist/styles/iview.css'
import http from './utils/http'
import Api from './utils/api'
import utils from './utils/utils'
import './utils/filters'

Vue.config.productionTip = false
Vue.use(VueRouter);
Vue.use(iView);

Vue.use(http)
Vue.use(Api)
Vue.use(utils)
/* eslint-disable no-new */

global.BASE_URL = process.env.API_HOST

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

5.找到config文件夹下的dev.env.js

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST: '"开发环境接口地址"'
})

6.页面中具体使用方法

<template>
  <div class="hello">
     <Select v-model="model8" clearable style="width:200px">
        <Option v-for="item in cityList" :value="item.productCode" :key="item.productCode">{{item.productName }}</Option>
    </Select>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      cityList:[],
      model8:"code"
    }
  },
  mounted(){
    this.http
      .post(BASE_URL + "请求路径",{})
      .then(data => {
        if (data.code == "success") {
			 this.cityList = data.data;
			 this.cityList.splice(0,0,{ productCode: "code", productName: "所有产品" })
        }
      })
      .catch(err => {
        console.log(err);
      });
  }
}
</script>
<style scoped>
</style>