一文带你了解前端加解密工具库:让你的代码无懈可击!

bcryptjs 加密 - 仅支持加密和比对密码,不支持解密

安装

通过 npm 安装:npm install bcryptjs

功能

  • 功能:字符串加密,已加密的字符串不可破解,仅可与原始密码进行比对。

  • 优点:加密后的字符串无法解密。

  • 缺点:已加密的字符串无法解密。

  • 应用领域:敏感信息加密,如登录密码。

  • npm 地址:npm - www.npmjs.com/package/bcr...

备注

bcryptjs 是一个用于加密和解密字符串的库,仅支持加密和比对密码,不支持解密。加密后的字符串无法被解密,只能与原始密码进行比对。因此,bcryptjs 适用于对敏感信息进行加密,如登录密码等。

示例

定义工具类bcrypt.js

JavaScript 复制代码
import bcryptjs from 'bcryptjs'//不可逆加密 bcryptjs 

/**
 * 不可逆加密 ,一旦加密不可解密,只可比对
 * @param {String} txt 加密、比对的文本
 * @param {String} hash 加密的哈希
 * @param {String} type default:jia, [jia 加密 ,bi 比对密码] 操作类型
 * @returns {[String|Boolear]} 返回值
 */
const cyj = (txt, hash, type = 'jia') => {
    let res = null

    // 比对
    if (type === 'bi') {
        if (!txt || !hash) {
            throw '解密参数错误或缺少参数'
        }
        res = bcryptjs.compareSync(txt, hash)
    } else {
        if (!txt) {
            throw '加密请传入明文'
        }
        // 加密
        res = bcryptjs.hashSync(txt)
    }

    return res
}

export default cyj

使用工具类

JavaScript 复制代码
import cyj from './utils/bcrypt.js '

const pwd = '728637263我是隐私信息'

//加密
const jia = cyj(pwd)

console.log(jia)//$2a$10$BsXXaevfIG8Og7mKSF5qFu0vSugvJbYWyr3apz9BElCV254.SoIYe
console.log(cyj(pwd, jia, 'bi'))//true
console.log(cyj(pwd, '我是老6', 'bi'))//false

CryptoJS 加解密 - 单个key加密

安装

通过 npm 安装:npm i crypto-js

功能

  • 作用:对字符加解密。

  • 优点:一个key可以加密与解密,就像锁钥匙,一把钥匙既可以开锁也可以解锁

  • 缺点:暂无明确的缺点信息

  • npm地址:www.npmjs.com/package/cry...

示例

定义方法:CryptoJS.js

JavaScript 复制代码
import CryptoJS from 'crypto-js'// aes加解密

/**
 * AES加密 
 * @param {String} originText 原始文本
 * @param {String} key 密钥
 * @returns 
 */
const encryptAES = (originText, key) => {
    if (originText) {
        const encrypt = CryptoJS.AES.encrypt(originText, key)
        return encrypt.toString()
    }
    return null
}


/**
 * AES解密 
 * @param {String} ciphertext 加密文本
 * @param {String} key 密钥
 * @returns 
 */
const decryptAES = (ciphertext, key) => {
    if (ciphertext) {
        const decrypted = CryptoJS.AES.decrypt(ciphertext, key).toString(CryptoJS.enc.Utf8)

        return decrypted
    }
    return null
}

/**
 * 创建AES密钥
 * @param {Number}  num defalut:10 生成几位数的key
 * @returns {String} 返回密钥
 */
const createAESKey = (num = 10) => {
    const library = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*+-./~=()[]{};:'?><,`";
    let key = ""
    for (var i = 0; i < num; i++) {
        let randomPoz = Math.floor(Math.random() * library.length);
        key += library.substring(randomPoz, randomPoz + 1);
    }
    return key
}


export {
    decryptAES,
    encryptAES,
    createAESKey
}

使用CryptoJS.js

JavaScript 复制代码
import {
    decryptAES,
    encryptAES,
    createAESKey
} from './CryptoJS.js'

//获取key
const 钥匙 = createAESKey()
const 账号 = '我是老6'

const 加密 = encryptAES(账号, 钥匙)
const 比对 = decryptAES(加密, 钥匙)

console.log(加密)
console.log(比对)

JSEncrypt | RSA加密 - 2把钥匙

注意:jsencrypt只能在前端使用,不能在后端使用

安装

通过 npm 安装依赖:npm i jsencrypt

功能

  • 作用:加密与解密,有2把钥匙,一把公钥,一把私钥,公钥负责加密,私钥负责解密。

  • 优点:后端有2把钥匙,一把公钥,一把私钥。把公钥发给前端,前端负责加密数据,后端拿着私钥负责解密数据,这样一来,只用拿着私钥的人知道明文是什么了。

  • 缺点:我不知道

  • npm地址:www.npmjs.com/package/jse...

示例

定义工具类

JavaScript 复制代码
import JSEncrypt from 'jsencrypt'  // 引入jsencrypt库  RSA 加、解密

/**
 * RSA 加、解密
 * @param {String,default:'getkey',value:'encrypt 加密|decrypt 解密 | getkey 获取公私钥'} type 加解密类型 
 * @param {String} txt 加解密字符
 * @param {String} key 密钥
 * @returns {String} 返回加解密字符
 */
const rsa = (type = 'getkey', txt, key) => {
    const jsencrypt = new JSEncrypt()
    let resData = null

    // 加密
    if (type === 'encrypt') {
        jsencrypt.setPublicKey(key)
        resData = jsencrypt.encrypt(txt)
        // 获取公私key
    } else if (type === 'getkey') {

        const prikey = jsencrypt.getPrivateKey()
        const pubkey = jsencrypt.getPublicKey()
        resData = {
            prikey,
            pubkey
        }

        // 解密
    } else {
        jsencrypt.setPrivateKey(key)
        resData = jsencrypt.decrypt(txt)
    }

    return resData
}

export default rsa 

使用工具类进行加密

JavaScript 复制代码
import rsa from '. jsencrypt.js'

// 公、私钥
const { prikey, pubkey } = rsa()

const 密码 = '我是老6'
const 加密 = rsa('encrypt', 密码, pubkey)
const 解密 = rsa('decrypt', 加密, prikey)

console.log(加密)
console.log(解密)

node-rsa - 后端RSA解加密 (可搭配前端jsencrypt)

node-rsa只能在后端使用;jsencrypt只能在前端使用

安装

通过 npm 安装依赖:npm i node-rsa

功能

node-rsa封装

  • 该封装仅后端node环境下可用,前端不可用。

  • 该封装可配合前端 jsencrypt一起使用,例如前端jsencrypt的加密数据,可用此封装解密等。

示例

JavaScript 复制代码
import NodeRSA from "node-rsa"

/**
 * 后端node获取公、私钥
 * keySize {Number} 生成私钥、密钥大小,与jsencrypt保持一致,默认1024
 * @returns {Object} { pubkey,prikey} pubkey 公钥 | prikey私钥
 */

const nodeGetKey = (keySize = 1024) => {
    const nodeKey = new NodeRSA({ b: keySize  })
    const pubkey = nodeKey.exportKey('public')
    const prikey = nodeKey.exportKey('private')

    return {
        pubkey,
        prikey
    }
}

/**
 * 后端node加密
 * @param {String} txt 加密的文本
 * @param {String} pubkey 公钥
 * @returns {String} 返回加密的文本
 */
const nodeEncrypt = (txt, pubkey) => {
    const nodeKey = new NodeRSA(pubkey)
    nodeKey.setOptions({ encryptionScheme: 'pkcs1' })// 因为jsencrypt自身使用的是pkcs1加密方案, nodejs需要修改成pkcs1。
    const encrypted = nodeKey.encrypt(txt, 'base64')

    return encrypted
}

/**
 * 后端node解密
 * @param {String} hash 加密的文本
 * @param {String} prikey 私钥
 * @returns 
 */
const nodeDecrypt = (hash, prikey) => {
    const nodeKey = new NodeRSA(prikey)
    nodeKey.setOptions({ encryptionScheme: 'pkcs1' }) // 因为jsencrypt自身使用的是pkcs1加密方案, nodejs需要修改成pkcs1。
    const decrypted = nodeKey.decrypt(hash, 'utf8')

    return decrypted

}

export {
    nodeDecrypt,
    nodeGetKey,
    nodeEncrypt
}
相关推荐
谢道韫6664 分钟前
今日总结 2024-12-27
开发语言·前端·javascript
嘤嘤怪呆呆狗15 分钟前
【插件】vscode Todo Tree 简介和使用方法
前端·ide·vue.js·vscode·编辑器
大今野21 分钟前
node.js和js
开发语言·javascript·node.js
ᥬ 小月亮27 分钟前
Js前端模块化规范及其产品
开发语言·前端·javascript
码小瑞43 分钟前
某些iphone手机录音获取流stream延迟问题 以及 录音一次第二次不录音问题
前端·javascript·vue.js
weixin_18944 分钟前
‌Vite和Webpack区别 及 优劣势
前端·webpack·vue·vite
半吊子伯爵1 小时前
开发过程优化·自定义鼠标右键菜单
前端·javascript·自定义鼠标右键菜单
xcLeigh1 小时前
HTML5实现好看的喜庆圣诞节网站源码
前端·html·html5
Tirzano1 小时前
vue3 ts 简单动态表单 和表格
前端·javascript·vue.js
杰~JIE1 小时前
前端工程化概述(初版)
前端·自动化·工程化·前端工程化·sop