Vue中的加密方式(js-base64、crypto-js、jsencrypt、bcryptjs)

 

目录

1.安装js-base64库 

2. 在Vue组件中引入js-base64库

3.使用js-base64库进行加密

4.Vue中其他加密方式 

1.crypto-js

2.jsencrypt

3.bcryptjs


1.安装js-base64库 

npm install js-base64 --save-dev

2. 在Vue组件中引入js-base64

import { Base64 } from 'js-base64';

3.使用js-base64库进行加密

// 加密字符串
const str = 'hello world';
const encodedStr = Base64.encode(str);
console.log(encodedStr); // 输出:aGVsbG8gd29ybGQ=// 解密字符串
const decodedStr = Base64.decode(encodedStr);
console.log(decodedStr); // 输出:hello world

使用Base64.encode()方法对字符串进行加密,并使用Base64.decode()方法对加密后的字符串进行解密。您可以根据需要使用这些方法来加密和解密字符串。请注意,加密后的字符串可能包含特殊字符,需要进行URL编码或Base64编码后才能在URL中传递。 

4.Vue中其他加密方式 

  • crypto-js

    crypto-js是一个JavaScript加密库,支持多种加密算法,包括AES、DES、Triple DES、RC4、SHA-1、SHA-256、MD5等。您可以在Vue项目中使用crypto-js来实现加密和解密。

  • jsencrypt

    jsencrypt是一个JavaScript RSA加密库,支持RSA加密和解密操作。您可以在Vue项目中使用jsencrypt来实现RSA加密和解密。

  • bcryptjs

    bcryptjs是一个JavaScript加密库,支持bcrypt算法。您可以在Vue项目中使用bcryptjs来实现密码加密和验证。

1.crypto-js

// 导入crypto-js库
const CryptoJS = require('crypto-js');// 待加密的数据
const data = 'Hello, world!';// 加密
const encryptedData = CryptoJS.AES.encrypt(data, 'secret key 123').toString();
console.log('加密后的数据:', encryptedData);// 解密
const decryptedData = CryptoJS.AES.decrypt(encryptedData, 'secret key 123').toString(CryptoJS.enc.Utf8);
console.log('解密后的数据:', decryptedData);

2.jsencrypt

// 导入jsencrypt库
const JSEncrypt = require('jsencrypt').default;// 待加密的数据
const data = 'Hello, world!';// 创建公钥和私钥实例
const encryptKey = new JSEncrypt();
const decryptKey = encryptKey.createDecryptionKey();// 设置公钥和私钥(在实际使用中需要使用真实密钥)
encryptKey.setPublicKey('-----BEGIN PUBLIC KEY-----\n' + PUBLIC_KEY + '\n-----END PUBLIC KEY-----');
decryptKey.setPrivateKey('-----BEGIN RSA PRIVATE KEY-----\n' + PRIVATE_KEY + '\n-----END RSA PRIVATE KEY-----');// 加密数据
const encryptedData = encryptKey.encrypt(data);
console.log('加密后的数据:', encryptedData);// 解密数据
const decryptedData = decryptKey.decrypt(encryptedData);
console.log('解密后的数据:', decryptedData);

3.bcryptjs

// 导入bcryptjs库
const bcrypt = require('bcryptjs');
const saltRounds = 10; // 设置盐的迭代次数(建议至少为10)
const password = 'password'; // 待加密的密码
const hashedPassword = bcrypt.hashSync(password, saltRounds); // 加密密码(得到散列密码)
console.log('散列密码:', hashedPassword); // 输出散列密码的哈希值

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/118986.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Shopee买家通系统全自动化操作简单方便又快速

Shopee买家通系统是一款专门针对虾皮买家号所开发的全自动化操作系统,可以自动注册、自动加购加心愿单、自动下单等。 1、全自动化注册 准备好账号需要的资料后即可运行注册任务,程序运行时可以自动输入手机号、自动接收短信、自动输入账号密码。账号支…

用Visual Studio(VS)开发UNIX/Linux项目

目录 FTP是免不了的 正确设置头文件 组织项目结构 创建何种项目类型 FTP自动上传 大部分具有Windows开发经验的程序员会比较喜欢使用Visual Studio,而大部分Unix/Linux程序员则喜欢使用UltraEdit直接在主机上写代码。 为什么直接在主机上写代码呢,因…

FlutterUnit 周边 | 收录排序算法可视化

theme: cyanosis 1. FlutterUnit 更新:排序算法可视化 排序算法可视化是用视图层表现出算法执行过程中排序的过程,感谢 编程的平行世界 在 《十几种排序算法的可视化效果,快来看看!👀》》 一文中提供的算法支持。我进行…

单目3D目标检测[基于深度辅助篇]

基于深度辅助的方法 1. Pseudo-LiDAR Pseudo-LiDAR from Visual Depth Estimation: Bridging the Gap in 3D Object Detection for Autonomous Driving康奈尔大学https://zhuanlan.zhihu.com/p/52803631 首先利用DRON或PSMNET从单目 (Monocular)或双目 (Stereo)图像获取对应的…

dijkstra算法python

Dijkstra算法是一种用于寻找带权重图中从一个起始节点到其他节点的最短路径的算法。下面是一个使用Python实现Dijkstra算法的示例代码: import heapq def dijkstra(graph, start): # 创建一个字典来存储节点到起始节点的最短距离 distances {node: float(infinity)…

设计院图纸加密防泄密方案——天锐绿盾加密软件@德人合科技

天锐绿盾是一款专业的企业信息化防泄密软件,主要针对文档全生命周期进行加密保护,包括创建、修改、传输、归档、分发、销毁等全过程。它可以加强外发数据及终端离线的管理,对正常授权外带范围内的数据流程进行规范。设计图纸、文档等成果数据…

(免费领源码)java#Springboot#mysql装修选购网站99192-计算机毕业设计项目选题推荐

摘 要 随着科学技术,计算机迅速的发展。在如今的社会中,市场上涌现出越来越多的新型的产品,人们有了不同种类的选择拥有产品的方式,而电子商务就是随着人们的需求和网络的发展涌动出的产物,电子商务网站是建立在企业与…

顺序表的定义与实现(数据结构与算法)

一、顺序表的定义 1. 顺序表的定义 #define MaxSize 10 //定义最大长度 typedef struct{ ElemType data[MaxSize]; //用静态的“数组”存放数据元素int length; //顺序表的当前长度 …

Ubuntu设置允许root用户登录

1、激活root用户 sudo passwd root //设置root密码 su root //接着使用root登录 2、设置允许root通过ssh登录 nano /etc/ssh/sshd_config 将 PermitRootLogin 改为 yes 3、重启ssh service ssh restart 到这里就好了

SparkSQL的Shuffle分区设定及异常数据处理API(去重、缺失值处理)

一、Spark SQL的Shuffle分区数目设定 二、异常数据处理API (1)去重方法dropDuplicates (2)删除有缺失值的行方法dropna (3)填充缺失值数据fillna 一、Spark SQL的Shuffle分区数目设定 在允许spark程序时&a…

德语中第二虚拟式在主动态的形式,柯桥哪里可以学德语

德语中第二虚拟式在主动态的形式 1. 对于大多数的动词,一般使用这样的一般现在时时态: wrde 动词原形 例句:Wenn es nicht so viel kosten wrde, wrde ich mir ein Haus am Meer kaufen. 如果不花这么多钱,我会在海边买一栋房…

8. Cesium中的camera

1. 介绍 camera是viewer.scene中的属性,用来控制当前的可见域。viewer.camera 是快捷写法,访问的是 viewer.scene.camera,所以调用时这两种写法都行。介绍常用的view.carmera方法。 (1). setView Camera根据视图位置…

React 在非组件环境切换路由

我的react-router-dom版本是6.16.0。之前在react中是这样配置路由的 App.jsx import ReactDOM from react-dom/client; import { HashRouter, Route, Routes } from react-router-dom;const root ReactDOM.createRoot(document.getElementById("app")); root.rend…

Python实验项目4 :面对对象程序设计

1:运行下面的程序,回答问题。 (1)说明程序的执行过程; (2)程序运行结果是什么? # (1)说明程序的执行过程; # (2)程序运行…

android开发使用OkHttp自带的WebSocket实现IM功能

一、背景 android app开发经常会有IM需求,很多新手不晓得如何入手,难点在于通讯不中断。其实android发展到今天,很多技术都很完善,有很多类似框架可以实现。例如有:okhttp自带的websocket框架、easysocket等等。本文主…

vite工具官方地址 +前端工具插件

该项目与 Vite 一起提供服务和捆绑。推荐的 IDE 设置是 ** VSCode Volar。 **如果您需要测试组件和网页,请查看赛普拉斯和赛普拉斯组件测试。 有关更多说明,请参见。README.md vite官方地址

如何做一个无符号数识别程序

1.状态分析 我们可以把无符号数分为:整数,带小数,带指数部分三种形式。以此构建一个DFA。首先需识别输入是整数还是小数点,若是整数部分输入然后还要再循环识别一次是否有小数点,最后识别是否有指数部分,指…

Spring学习笔记—JDK动态代理

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉 🍎个人主页:Leo的博客 💞当前专栏: Spring专栏 ✨特色专栏: M…

Redis -- 基础知识2

1.Redis客户端介绍 1.基础介绍 Redis是一种客户端-服务器结构的程序,通过网络进行互动 客户端的多种形态 1.自带了命令行客户端:redis-cil 2.图形化界面的客户端:依赖windows系统,连接服务器有诸多限制,不建议使用 3.基…

Redis -- 基础知识1

1.介绍 1.初识Redis Redis:The open source, in-memory data store used by millions of developers as a database, cache, streaming engine, and message broker. in-memory data:在内存中存储,Redis是在分布式系统中存储起作用的 解释&am…