一: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加密的更多相关文章

  1. vue 中如何对公共css、 js 方法进行单文件统一管理,全局调用

    1.前言 最近,为公司开发交付的一个后台管理系统项目,我使用了 Vue 框架进行开发实践. 模块化.组件化.工程化的开发体验非常好.良好的 api,优雅的设计,对于工程师非常友好. 但是由于模块比较多 ...

  2. vue中使用剪切板插件 clipboard.js

    vue中使用剪切板需要借助一个插件,clipboard,使用方法还是很简单的,先下载,然后引入: npm i clipboard -S //引入 import Clipboard from 'clip ...

  3. vue中封装一个全局的弹窗js

    /** * Created by yx on 2017/12/21. */ export default { /** * 带按钮的弹框 * <!--自定义提示标题,内容,单个按钮事件--> ...

  4. vue中config/index.js:配置的详细理解

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') ...

  5. 对vue中 默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置,给不同的编译条件提供配置

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') ...

  6. Vue、webpack中默认的config.js、index.js 配置详情

    在vue.js 框架搭建好后,其vue-cli 自动构建的目录里面相关环境变量及其基本变量配置,如下代码所示: module.exports = { build: { index: path.reso ...

  7. vue中打包后vendor文件包过大

    vue中webpack打包后vendor.xxx.js文件一般都特别大,其原因是因为我们引用的依赖都被压缩成一个js文件,这样会导致vendor文件过大.页面加载速度过慢,影响用户体验.所以我们就要把 ...

  8. vue中webpack的配置理解

    当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面  (环境变量及其基本变量的配置) var path = require('path') ...

  9. vue中打包之后的dist文件不放在服务器的根目录下

    在工作当中,我使用webpack打包的dist,由于管理的问题,无法被放在服务器根目录下 ,但在目前的vue配置,dist不放在根目录下,访问页面会成为一片空白,于是便要对vue框架的config进行 ...

随机推荐

  1. 老猿学5G扫盲贴:与用户和终端相关的名词UE、SUPI、GPSI、PEI

    专栏:Python基础教程目录 专栏:使用PyQt开发图形界面Python应用 专栏:PyQt+moviepy音视频剪辑实战 专栏:PyQt入门学习 老猿Python博文目录 老猿学5G博文目录 和4 ...

  2. PyQt(Python+Qt)学习随笔:QTreeView树形视图的sortingEnabled属性

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 QTreeView树形视图的sortingEnabled属性用于控制视图中的数据是否启用按表头排序, ...

  3. PyQt(Python+Qt)学习随笔:QAbstractItemView的dragEnabled和dragDropMode属性的关系

    老猿Python博文目录 老猿Python博客地址 在<PyQt(Python+Qt)学习随笔:QAbstractItemView的dragEnabled属性的困惑>中,老猿觉得dragE ...

  4. PyQt(Python+Qt)学习随笔:Qt Designer中主窗口对象的iconSize属性

    主窗口对象的iconSize属性保存的是主窗口中工具栏的图标尺寸,在没有设置时缺省是GUI图形界面样式中定义的工具栏的缺省大小. 注意:这个大小是工具栏图标的最小尺寸. 可以使用iconSize()返 ...

  5. APP非功能测试

    1.移动APP启动时间测试 问题:如何获取启动时间? 答:通过adb的logcat来获取Activity启动时间.用户体验时间=Activity启动时间+启动中异步UI绘制的时间. 启动时间的测试主要 ...

  6. 刷题记录:[GWCTF 2019]枯燥的抽奖

    目录 刷题记录:[GWCTF 2019]枯燥的抽奖 知识点 php伪随机性 刷题记录:[GWCTF 2019]枯燥的抽奖 题目复现链接:https://buuoj.cn/challenges 参考链接 ...

  7. Asp.net core中RedisMQ的简单应用

    最近一个外部的项目,使用到了消息队列,本来是用rabbitmq实现的,但是由于是部署到别人家的服务器上,想尽量简化一些,项目中本来也要接入了redis缓存,就尝试使用redis来实现简单的消息队列. ...

  8. ThreadLocal原理记录,别被坑了!!

    简介 ThreadLocal的用处 ThreadLocal是为了将数据记录一份到某个线程里,确保该数据线程安全 例如数据库的Connection放入ThreadLocal,一个事务会用到很多DAO,但 ...

  9. 笔记-[ZJOI2007]仓库建设

    笔记-[ZJOI2007]仓库建设 [ZJOI2007]仓库建设 \(f_i\) 到第 \(i\) 个工厂并且建设了仓库. \[\begin{split} f_i=&\min\{f_j+\su ...

  10. mysql聚簇索引和非聚簇索引

    聚簇索引 InnoDB使用的是聚簇索引 将数据与主键索引放在了一起,索引的叶子节点保存了行数据,找到了主键索引,即找到了行数据. 辅助索引记录了主键的位置,所以查询where name= xxx 时, ...