当前位置: 首页 > news >正文

uniapp AES加密解密

uniapp里我知道的有两种aes加密解密方式。

一、引入crypto-js

1.需要在uniapp项目根目录里,打开命令行,执行如下命令:

npm install crypto-js

2.在项目根目录,创建一个utils文件夹,并创建一个aes_endecrypt.js文件

/**
 * 工具类
 */
import Vue from 'vue'
import CryptoJS from 'crypto-js'
let keyStr = "abcde123456";//加密密钥
let ivStr  = "yyuuide45678";//矢量

//加密
export function aes_encrypt(word){ 
    keyStr = keyStr ? keyStr : 'hfhfuu8dolv98bt6';
    var key  = CryptoJS.enc.Utf8.parse(keyStr);
	var iv   = CryptoJS.enc.Utf8.parse(ivStr);
    // var srcs = CryptoJS.enc.Utf8.parse(word);
    var encrypted = CryptoJS.AES.encrypt(word, key, {
		iv:iv,
		mode:CryptoJS.mode.CBC,
		padding: CryptoJS.pad.Pkcs7});
    return encrypted.toString();
}

//解密  
export function aes_decrypt(word){  
    keyStr = keyStr ? keyStr : 'hfhfuu8dolv98bt6';
    var key  = CryptoJS.enc.Utf8.parse(keyStr);//
	var iv   = CryptoJS.enc.Utf8.parse(ivStr);
	// const restoreBase64 = word.replace(/\-/g,'+').replace(/_/g,'/');
	var restoreBase64=word.replace(/[\r\n]/g,'');

    var decrypt = CryptoJS.AES.decrypt(restoreBase64, key, {
		iv:iv,
		mode:CryptoJS.mode.CBC,
		padding: CryptoJS.pad.Pkcs7});
    return CryptoJS.enc.Utf8.stringify(decrypt).toString();
}

 3.在main.js文件中,引入方法,并注册为全局方法

import { aes_encrypt, aes_decrypt } from '@/utils/aes_endecrypt.js';
Vue.prototype.aes_encrypt = aes_encrypt;
Vue.prototype.aes_decrypt = aes_decrypt;

4.在页面中使用aes加密,解密

var encrypt = this.aes_encrypt('123456')
console.log('===encrypt===',encrypt);
var decrypt = this.aes_decrypt(encrypt)
console.log('===decrypt===',decrypt);

二、第二种方式:直接引入插件

1.在dcloud插件市场中搜索-传输加密,AES对称加密 (作者 ifloce)引入项目

2.项目main.js文件中,注册全局组件

import AES from '@/js_sdk/ar-aes/ar-aes.js'
Vue.prototype.AES = AES.AES

3. 在App.vue中,在methods中创建加密、解密方法

methods: {
	//AES加密
	aesEncrypt(encrypt){
		//加密值
		var e = this.AES.encrypt(encrypt,'1234567891234567','1234567891234567')
		return e;
	},
	//AES解密
	aesDecrypt(decrypt){
		//解密值
		var d = this.AES.decrypt(decrypt,'1234567891234567','1234567891234567')
		return d;
	},
},

4.在页面中使用aes加密解密方式

var encrypt = getApp().aesEncrypt('abcde123');
console.log('===encrypt===',encrypt);
var decrypt = getApp().aesDecrypt(encrypt);
console.log('===decrypt===',decrypt);

 

相关文章:

  • 第二届邯郸钢铁展会,图扑软件荣获“2022钢铁行业智造之星奖”
  • 第三届国际品质节,群硕企业与OI产品共同获奖
  • JSP琴行管理系统myeclipse开发mysql数据库bs框架java编程web网页结构
  • 智能座舱:汽车雷达的下一个战场
  • MindSpore应用案例——AI诗人
  • cordova 使用
  • 常见ai智能机器人呼叫中心等如何让短信营销更加有价值?
  • 极端气候肆虐催化,碳中和带出了一个“再生时代”
  • Cyclopropene-PEG-MAL Maleimide|环丙烯-聚乙二醇-马来酰亚胺
  • 大学生入学该准备哪些东西?Ipad好用电容笔测评
  • Redis 启动失败,appendonly.aof 损坏
  • 教育管理系统功能点
  • arthas调查内存溢出 kibana宕机导致内存溢出
  • pandas分析数据常用代码【自用】
  • web逆向 知识小结
  • ----------
  • [PHP内核探索]PHP中的哈希表
  • [deviceone开发]-do_Webview的基本示例
  • 【翻译】Mashape是如何管理15000个API和微服务的(三)
  • Angular 响应式表单 基础例子
  • CentOS学习笔记 - 12. Nginx搭建Centos7.5远程repo
  • gulp 教程
  • Java 23种设计模式 之单例模式 7种实现方式
  • Mithril.js 入门介绍
  • Python利用正则抓取网页内容保存到本地
  • Spring技术内幕笔记(2):Spring MVC 与 Web
  • Twitter赢在开放,三年创造奇迹
  • Vue.js源码(2):初探List Rendering
  • 阿里云ubuntu14.04 Nginx反向代理Nodejs
  • 等保2.0 | 几维安全发布等保检测、等保加固专版 加速企业等保合规
  • 技术攻略】php设计模式(一):简介及创建型模式
  • 前端工程化(Gulp、Webpack)-webpack
  • 吐槽Javascript系列二:数组中的splice和slice方法
  • 7行Python代码的人脸识别
  • ​Distil-Whisper:比Whisper快6倍,体积小50%的语音识别模型
  • ​LeetCode解法汇总2583. 二叉树中的第 K 大层和
  • ​Spring Boot 分片上传文件
  • ​ubuntu下安装kvm虚拟机
  • ​VRRP 虚拟路由冗余协议(华为)
  • #13 yum、编译安装与sed命令的使用
  • #define MODIFY_REG(REG, CLEARMASK, SETMASK)
  • #if和#ifdef区别
  • #Java第九次作业--输入输出流和文件操作
  • (3)(3.2) MAVLink2数据包签名(安全)
  • (8)STL算法之替换
  • (pt可视化)利用torch的make_grid进行张量可视化
  • (vue)el-checkbox 实现展示区分 label 和 value(展示值与选中获取值需不同)
  • (阿里巴巴 dubbo,有数据库,可执行 )dubbo zookeeper spring demo
  • (笔试题)分解质因式
  • (附源码)springboot人体健康检测微信小程序 毕业设计 012142
  • (附源码)ssm航空客运订票系统 毕业设计 141612
  • (附源码)计算机毕业设计SSM保险客户管理系统
  • (个人笔记质量不佳)SQL 左连接、右连接、内连接的区别
  • (九)One-Wire总线-DS18B20
  • (亲测有效)解决windows11无法使用1500000波特率的问题