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.hqwc.cn/news/294321.html

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

相关文章

Qt之QWidget 自定义倒计时器

简述 Qt提供的带进度显示的只有一个QProgresBar,这个控件要么是加载进度从0~100%,要么是持续的两边滚动;而我想要是倒计时的效果,所以QProgresBar并不满足要求,而Qt重写控件相对于MFC来说简直是轻而易举,所以就整了两种不同的倒计时控件; 效果 代码 QPushButton的绘制部…

华为交换机配置BGP的基本示例

BGP简介 定义 边界网关协议BGP(Border Gateway Protocol)是一种实现自治系统AS(Autonomous System)之间的路由可达,并选择最佳路由的距离矢量路由协议。早期发布的三个版本分别是BGP-1(RFC1105&#xff0…

【Linux笔记】网络操作命令详细介绍

🍎个人博客:个人主页 🏆个人专栏:Linux学习 ⛳️ 功不唐捐,玉汝于成 前言: 网络操作是Linux系统中常见的任务之一,它涵盖了测试网络连接、配置网络接口、显示网络统计信息以及远程登录和文件传…

Springboot访问html页面

目录 1、html页面创建 2、打开application.properties,添加如下配置 3、Controller中的代码 4、测试效果 项目结构如图 1、html页面创建 在原有的项目resouces目录下创建static包,并在static下创建pages,然后在pages包下index.html. index.html内容 <!DOCTYPE html>…

SpringMVC系列之技术点定向爆破二

SpringMVC的运行流程 客户端发送请求 tomcat接收对应的请求 SpringMVC的核心调度器DispatcherServlet接收到所有请求 请求地址与RequestMapping注解进行匹配&#xff0c;定位到具体的类和具体的处理方法&#xff08;封装在Handler中&#xff09; 核心调度器找到Handler后交…

MyBatis中延迟加载,全局和局部的开启使用与关闭

文章目录 MyBatis中延迟加载&#xff0c;全局和局部的开启使用与关闭1、问题提出2、延迟加载和立即加载延迟加载立即加载 3、三种对应的表关系中的加载4、打开全局延迟加载&#xff08;实现一对一的延迟加载&#xff09;5、实现一对多的延迟加载&#xff08;将上面设置的全局延…

Oracle WebLogic Server WebLogic WLS组件远程命令执行漏洞 CVE-2017-10271

Oracle WebLogic Server WebLogic WLS组件远程命令执行漏洞 CVE-2017-10271 已亲自复现 漏洞名称漏洞描述影响版本 漏洞复现环境搭建漏洞利用 修复建议 漏洞名称 漏洞描述 在Oracle WebLogic Server 10.3.6.0.0/12.1.3.0.3/2.2.1/1.10/12.2.1.1/22.0&#xff08;Application …

一个简单的 HTTP 请求和响应服务——httpbin

拉取镜像 docker pull kennethreitz/httpbin:latest 查看本地是否存在存在镜像 docker images | grep kennethreitz/httpbin:latest 创建 deployment&#xff0c;指定镜像 apiVersion: apps/v1 kind: Deployment metadata:labels:app: httpbinname: mm-httpbinnamespace: mm-…

ansible的脚本:playbook剧本

&#xff08;一&#xff09;playbook的组成部分 tasks 任务&#xff0c;包含要在主机上执行的操作&#xff0c;使用模块定义这些操作&#xff0c;每一个任务都是一个模块的调用 variables 变量&#xff0c;存储和传递数据&#xff08;和shell脚本中的变量是一个意思&#xf…

什么是Vue.js ? Vue相关介绍

vue介绍 vue官网&#xff1a;Vue.js (vuejs.org) a) Vue.js目前最流行的一个前端框架&#xff0c;三大主流前端框架之一。 b) AngularJS是Vue早期开发的灵感来源。然而&#xff0c;AngularJS 中存在的许多问题&#xff0c;在 Vue 中已经得到解决。 c) Vue.js是一套构…

046.Python包和模块_导入相关

我 的 个 人 主 页&#xff1a;&#x1f449;&#x1f449; 失心疯的个人主页 &#x1f448;&#x1f448; 入 门 教 程 推 荐 &#xff1a;&#x1f449;&#x1f449; Python零基础入门教程合集 &#x1f448;&#x1f448; 虚 拟 环 境 搭 建 &#xff1a;&#x1f449;&…

MySQL运维实战(1.2)安装部署:使用二进制安装部署

作者&#xff1a;俊达 引言 上一篇我们使用了RPM进行安装部署&#xff0c;这是一种安装快速、简化部署和管理过程、与操作系统提供的包管理工具紧密集成的部署方法。此外&#xff0c;当你需要更高的灵活性和自定义性&#xff0c;并且愿意承担一些额外的手动配置和管理工作&am…