vue中使用AES.js和crypto.js加密
一:crypto-js加密
1.1:安装依赖
npm install crypto-js --save-dev
1.2 :在项目目录上创建一个js文件里面写入加密,解密的代码
mport CryptoJS from 'crypto-js'
/**
*
* @param {*待加密的字符串} str
* @param {*相当于是密钥} strKey
* @param {*相当于是双层密钥的意思} strIv
* strKey strIv长度需要和后面商量
*/
export let encrypt = function (str, strKey, strIv) { //加密
let key = CryptoJS.enc.Utf8.parse(strKey);
let iv = CryptoJS.enc.Utf8.parse(strIv);
let encrypted = ''; let srcs = CryptoJS.enc.Utf8.parse(str);
encrypted = CryptoJS.AES.encrypt(srcs, key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
return encrypted.ciphertext.toString();
};
export let decrypt = function (str, strKey, strIv) { //解密
let key = CryptoJS.enc.Utf8.parse(strKey);
let iv = CryptoJS.enc.Utf8.parse(strIv);
let encryptedHexStr = CryptoJS.enc.Hex.parse(str);
let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
let decrypt = CryptoJS.AES.decrypt(srcs, key, {
iv: iv,
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
return decryptedStr.toString();
};
export function getTimes() {
return new Date().getTime()
};
当然具体加密方式就要看公司内部的规则。但是方法差不多
1.3:main.js中全局引入
import { encrypt, decrypt } from '@/utils/encryp.js';
Vue.prototype.encrypt = encrypt
Vue.prototype.decrypt = decrypt
1.4:在你想要使用的页面进行使用
let c = this.encrypt("所需加密的字符串")
console.log(c) //加密
let d = this.decrypt(c)
console.log(d) //解密
二:AES.js加密
其实方法大同小异
2.1:装依赖
npm install aes-js
2.2:创建文件装代码
var data1={}//要加密的数据
var aseKey='你们公司自己的密钥';//密钥
var key = CryptoJS.enc.Utf8.parse(aesKey);//将密钥转换成Utf8字节数组
//加密
var encrypt = CryptoJS.AES.encrypt(JSON.stringify(data1), key, {
iv: CryptoJS.enc.Utf8.parse(aseKey.substr(0,16)),
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
var data2=encrypt.toString();//加密后的数据
//解密
var decrypt = CryptoJS.AES.decrypt(data2, key, {
iv: CryptoJS.enc.Utf8.parse(aseKey.substr(0,16)),
mode: CryptoJS.mode.CBC,
padding: CryptoJS.pad.Pkcs7
});
var data3=JSON.parse(decrypt.toString(CryptoJS.enc.Utf8));//解密后的数据
2.3:然后与上面相同在自己需要的地方使用
AES.JS加密取自于:https://blog.csdn.net/yingbaoyu/article/details/95761177 经过实际的测试也可以达到加密的效果。
vue中使用AES.js和crypto.js加密的更多相关文章
- vue 中如何对公共css、 js 方法进行单文件统一管理,全局调用
1.前言 最近,为公司开发交付的一个后台管理系统项目,我使用了 Vue 框架进行开发实践. 模块化.组件化.工程化的开发体验非常好.良好的 api,优雅的设计,对于工程师非常友好. 但是由于模块比较多 ...
- vue中使用剪切板插件 clipboard.js
vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clip ...
- vue中封装一个全局的弹窗js
/** * Created by yx on 2017/12/21. */ export default { /** * 带按钮的弹框 * <!--自定义提示标题,内容,单个按钮事件--> ...
- vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) var path = require('path') ...
- 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置,给不同的编译条件提供配置
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) var path = require('path') ...
- Vue、webpack中默认的config.js、index.js 配置详情
在vue.js 框架搭建好后,其vue-cli 自动构建的目录里面相关环境变量及其基本变量配置,如下代码所示: module.exports = { build: { index: path.reso ...
- vue中打包后vendor文件包过大
vue中webpack打包后vendor.xxx.js文件一般都特别大,其原因是因为我们引用的依赖都被压缩成一个js文件,这样会导致vendor文件过大.页面加载速度过慢,影响用户体验.所以我们就要把 ...
- vue中webpack的配置理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) var path = require('path') ...
- vue中打包之后的dist文件不放在服务器的根目录下
在工作当中,我使用webpack打包的dist,由于管理的问题,无法被放在服务器根目录下 ,但在目前的vue配置,dist不放在根目录下,访问页面会成为一片空白,于是便要对vue框架的config进行 ...
随机推荐
- PyQt(Python+Qt)学习随笔:Qt Designer中QAbstractButton派生按钮部件的icon属性和iconSize属性
icon属性 icon属性保存按钮上展示的图标,图标的缺省大小由图形界面的样式决定,但可以通过 iconSize 属性进行调整. 图标的几种子属性状态的含义与QWidget的windowIcon属性相 ...
- Nday漏洞组合拳修改全校师生密码
很久以前写的文章了,发一下:) 本文是我真实的挖洞经历.撰写本文时相关学校已修复漏洞,相关漏洞也提交给了教育漏洞平台.纯粹是挖洞经验的总结和技术分享,由于敏感信息比较多,所以文章里面很多图片已经面目全 ...
- CSS初识- 选择器 &背景& 浮动& 盒子模型
# CSS初识-目标: > 1. 学会使用CSS选择器 > 2. 熟记CSS样式和外观属性 > 3. 熟练掌握CSS各种基础选择器 > 4. 熟练掌握CSS各种复合选择器 &g ...
- django学习——request.POST.get(‘key’) 、 request.GET.get('key', '')
request.POST是用来接受从前端表单中传过来的数据,比如用户登录过程中传递过来的username.passwrod等字段.返回类型是字典: 在后台进行数据获取时,有两种方法(以username ...
- ripple Failed to load resource: the server responded with a status of 404 (Not Found)
在VS2015中使用Cordova + typescript开发中,遇到个问题. 在javascript console 中提示: Failed to load resource: the serve ...
- react路由初探(1)
import React from 'react'; import logo from './logo.svg'; import './App.css'; class About extends Re ...
- Jmeter(三十三) - 从入门到精通 - Jmeter Http协议录制脚本工具-Badboy6(详解教程)
1.简介 今天分享的就是在上一篇文章的基础上来进行讲解和分享:Badboy使用数据源Excel进行脚本参数化.然后在使用读取的参数进行对比断言. 2.具体场景 Badboy录制一个搜索的脚本,并对搜索 ...
- 「IOI2017」接线 的另类做法
看到这题,我的第一反应是:这就是一个费用流模型?用模拟费用流的方法? 这应该是可以的,但是我忘记了怎么模拟费用流了IOI不可能考模拟费用流.于是我就想了另外一个方法. 首先我们考虑模拟费用流的模型如下 ...
- 用正则怎么将html文件中文字取出进行ASCII码转换?
用正则怎么将html文件中文字取出?今天碰到这个问题,思来想去尝试了好几种方法,历经一阵头脑风暴,最后终于还是解决了,想想还是来记录一下.一共定义了三个函数,包含正则切割.正则判断对象开头.ASCII ...
- go并发之goroutine和channel,并发控制入门篇
并发的概念及其重要性 这段是简单科普,大佬可以跳过 并发:并发程序指同时进行多个任务的程序.在操作系统中,是指一个时间段中有几个程序都处于已启动运行到运行完毕之间,且这几个程序都是在同一个处理机上运行 ...