当前位置: 开发笔记 > 前端 > 正文

vue接口请求加密实例

作者：风清淡雅的梦 | 来源：互联网 | 2022-02-25 19:11

这篇文章主要介绍了vue接口请求加密实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

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= '登录过期请重新登录'  
  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]) &＃63; 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) &＃63; '' : ';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 = "&＃63;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) &＃63; 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: ''
})

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

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

6.页面中具体使用方法

以上这篇vue接口请求加密实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。

推荐阅读

css
iOS超签签名服务器搭建及其优劣势

本文介绍了搭建iOS超签签名服务器的原因和优势，包括不掉签、用户可以直接安装不需要信任、体验好等。同时也提到了超签的劣势，即一个证书只能安装100个，成本较高。文章还详细介绍了超签的实现原理，包括用户请求服务器安装mobileconfig文件、服务器调用苹果接口添加udid等步骤。最后，还提到了生成mobileconfig文件和导出AppleWorldwideDeveloperRelationsCertificationAuthority证书的方法。 ... [详细]

蜡笔小新 2023-12-11 20:23:23
css
Java验证码——kaptcha的使用配置及样式

本文介绍了如何使用kaptcha库来实现Java验证码的配置和样式设置，包括pom.xml的依赖配置和web.xml中servlet的配置。 ... [详细]

蜡笔小新 2023-12-13 13:58:25
console
使用nodejs爬取b站番剧数据，计算最佳追番推荐

本文介绍了如何使用nodejs爬取b站番剧数据，并通过计算得出最佳追番推荐。通过调用相关接口获取番剧数据和评分数据，以及使用相应的算法进行计算。该方法可以帮助用户找到适合自己的番剧进行观看。 ... [详细]

蜡笔小新 2023-12-14 20:44:52
console
Alink回归预测的不完善问题及期待

本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]

蜡笔小新 2023-12-14 14:25:33
vue
网络请求模块选择——axios框架的基本使用和封装

本文介绍了选择网络请求模块axios的原因，以及axios框架的基本使用和封装方法。包括发送并发请求的演示，全局配置的设置，创建axios实例的方法，拦截器的使用，以及如何封装和请求响应劫持等内容。 ... [详细]

蜡笔小新 2023-12-12 10:16:43
vue
使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换

本文介绍了如何使用JSONObiect和Gson相关方法实现json数据与kotlin对象的相互转换。首先解释了JSON的概念和数据格式，然后详细介绍了相关API，包括JSONObject和Gson的使用方法。接着讲解了如何将json格式的字符串转换为kotlin对象或List，以及如何将kotlin对象转换为json字符串。最后提到了使用Map封装json对象的特殊情况。文章还对JSON和XML进行了比较，指出了JSON的优势和缺点。 ... [详细]

蜡笔小新 2023-12-11 16:20:50
jq
Node.js学习笔记(一)package.json及cnpm

本文介绍了Node.js中包的概念，以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM（Node Package Manager）的基本介绍和使用方法，以及如何通过NPM下载第三方模块。 ... [详细]

蜡笔小新 2023-12-10 18:26:02
jq
互联网思维中的3个段子，9大分类和19条法则

本文介绍了互联网思维中的三个段子，涵盖了餐饮行业、淘品牌和创业企业的案例。通过这些案例，探讨了互联网思维的九大分类和十九条法则。其中包括雕爷牛腩餐厅的成功经验，三只松鼠淘品牌的包装策略以及一家创业企业的销售额增长情况。这些案例展示了互联网思维在不同领域的应用和成功之道。 ... [详细]

蜡笔小新 2023-12-10 14:58:10
build
JavaScript进化：从迁徙到TypeScript

本文介绍了JavaScript进化到TypeScript的历史和背景，解释了TypeScript相对于JavaScript的优势和特点。作者分享了自己对TypeScript的观察和认识，并提到了在项目开发中使用TypeScript的好处。最后，作者表示对TypeScript进行尝试和探索的态度。 ... [详细]

蜡笔小新 2023-12-09 19:52:20
npm
angular项目中使用Primeng

关键词： ... [详细]

蜡笔小新 2023-12-09 09:29:47
vue
微信民众号商城/小顺序商城开源项目介绍及使用教程

本文介绍了一个基于WeiPHP5.0开发的微信民众号商城/小顺序商城的开源项目，包括前端和后端的目录结构，以及所使用的技术栈。同时提供了项目的运行和打包方法，并分享了一些调试和开发经验。最后还附上了在线预览和GitHub商城源码的链接，以及加入前端交流QQ群的方式。 ... [详细]

蜡笔小新 2023-12-09 08:45:47
vue
Mac OS 升级到11.2.2 Eclipse打不开了，报错Failed to create the Java Virtual Machine

本文介绍了在Mac OS升级到11.2.2版本后，使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题，并提供了解决方法。 ... [详细]

蜡笔小新 2023-12-14 12:01:13
vue
Hibernate基础映射

在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]

蜡笔小新 2023-12-14 10:57:47
vue
测试人的性格，点火让他着急，考验婚姻问题的善意玩人

本文讲述了作者通过点火测试男友的性格和承受能力，以考验婚姻问题。作者故意不安慰男友并再次点火，观察他的反应。这个行为是善意的玩人，旨在了解男友的性格和避免婚姻问题。 ... [详细]

蜡笔小新 2023-12-14 09:10:09
react
安卓select模态框样式改变_微软Office风格的多端（Web、安卓、iOS）组件库——Fabric UI...

介绍FabricUI是微软开源的一套Office风格的多端组件库，共有三套针对性的组件，分别适用于web、android以及iOS，Fab ... [详细]

蜡笔小新 2023-12-14 05:55:08

风清淡雅的梦

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章