vue中的加密方式总结

 更新时间:2023年11月16日 08:30:16   作者:m0_73734137  
这篇文章主要为大家详细介绍了vue中常见的加密方式实现,例如js-base64、crypto-js、jsencrypt、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); // 加密密码(得到散列密码)

到此这篇关于vue中的加密方式总结的文章就介绍到这了,更多相关vue加密内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 解决element-ui的table表格控件表头与内容列不对齐问题

    解决element-ui的table表格控件表头与内容列不对齐问题

    这篇文章主要介绍了解决element-ui的table表格控件表头与内容列不对齐问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • 使用vue2实现购物车和地址选配功能

    使用vue2实现购物车和地址选配功能

    这篇文章主要介绍了使用vue2实现购物车和地址选配功能,本文通过实例代码相结合的形式给大家介绍的非常详细,需要的朋友可以参考下
    2018-03-03
  • Vue+ElementUI容器无法铺满网页的问题解决

    Vue+ElementUI容器无法铺满网页的问题解决

    这篇文章主要介绍了Vue+ElementUI容器无法铺满网页的问题解决,文章通过图文结合的方式给大家讲解的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2024-08-08
  • vue播放flv、m3u8视频流(监控)的方法实例

    vue播放flv、m3u8视频流(监控)的方法实例

    随着前端大屏页面的逐渐壮大,客户的...其中实时播放监控的需求逐步增加,视频流格式也是有很多种,用到最多的.flv、.m3u8,下面这篇文章主要给大家介绍了关于vue播放flv、m3u8视频流(监控)的相关资料,需要的朋友可以参考下
    2023-04-04
  • Vue-CLI 3.X 部署项目至生产服务器的方法

    Vue-CLI 3.X 部署项目至生产服务器的方法

    这篇文章主要介绍了Vue-CLI 3.X 部署项目至生产服务器的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • vue-router实现编程式导航的代码实例

    vue-router实现编程式导航的代码实例

    今天小编就为大家分享一篇关于vue-router实现编程式导航的代码实例,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • vue三种模糊查询方式代码实例

    vue三种模糊查询方式代码实例

    这篇文章主要给大家介绍了关于vue三种模糊查询方式的相关资料,在vue中模糊搜索主要是用computed属性实现,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • el-select下拉选择缓存的实现

    el-select下拉选择缓存的实现

    本文主要介绍了在使用el-select实现下拉选择缓存时遇到的问题及解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-01-01
  • Vue-cli打包后部署到子目录下的路径问题说明

    Vue-cli打包后部署到子目录下的路径问题说明

    这篇文章主要介绍了Vue-cli打包后部署到子目录下的路径问题说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09
  • 在vue中根据光标的显示与消失实现下拉列表

    在vue中根据光标的显示与消失实现下拉列表

    这篇文章主要介绍了在vue中根据光标的显示与消失实现下拉列表,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09

最新评论