vue项目集成JSEncrypt加密

最新推荐文章于 2025-04-02 14:39:00 发布

原创最新推荐文章于 2025-04-02 14:39:00 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端内容专栏收录该内容

1 篇文章

订阅专栏

该博客介绍了如何在Vue项目中集成JSEncrypt库进行数据加密和解密。首先，通过npm安装依赖。然后，定义了两个公共方法，分别用于加密和解密，其中加密使用公钥，解密使用私钥。在Vue页面中，可以导入并调用这些方法对敏感信息进行加解密操作，确保数据的安全传输。

vue项目集成JSEncrypt加密

1.安装依赖

npm install jsencrypt

2.公共的加密解密方法

使用的地方引入
import { JSEncrypt } from 'jsencrypt'

/**
 * 加密
 * @param msg 加密的内容
 * @returns 
 */
export function encryption (msg: string) {
  const encrypt = new JSEncrypt()
  encrypt.setPublicKey(publicKey)
  const encrypted = encrypt.encrypt(password)
  return encrypted
}

// 解密（一般不在前端解密，都是后端进行解密）
export function decrypt (msg) {
  const privateKey = '解密的私钥'
  let decrypt = new JSEncrypt()
  decrypt.setPrivateKey(privateKey)
  var decryptMsg = decrypt.decrypt(msg)
  return decryptMsg
}

3.vue页面使用

引入写好的加密解密方法
import { encryption, decrypt  } from '@/utils/index'

 使用：
 加密：
 let msg = '加密的内容'
 let encrypted = encryption(msg )
 console.log(‘加密后的内容==',  encrypted);

解密：
let decryptMsg = '密文'
let msg = decrypt(decryptMsg)
console.log("解密后的内容==", msg)