问题：在vue项目中如何使用RSA进行加密？

最新推荐文章于 2026-05-19 06:19:44 发布

原创最新推荐文章于 2026-05-19 06:19:44 发布 · 577 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

Vue 专栏收录该内容

18 篇文章

订阅专栏

本文介绍了在Vue项目中如何使用RSA加密技术来保护用户密码。通过引入jsencrypt库，实现了客户端获取服务端提供的公钥，然后使用公钥对用户输入的密码进行加密，最后将加密后的数据发送给服务端进行解密。详细步骤包括安装依赖、在main.js中注册加密方法以及在组件中调用加密方法进行登录请求。

遇到的问题：

在vue项目中如何使用RSA进行加密？

解决思路：

使用jsencrypt进行加密。一般是客户端初始化时访问登录服务时，服务端面动态生成一对RSA对，公钥传给客户端，客户端拿到后，用户输入密码后，点登录时用公钥加密返回给服务端，服务端用私钥解就行了。

解决方法：

一、安装依赖

npm install jsencrypt --save

二、main.js中引用依赖

import JSEncrypt from 'jsencrypt';
 
Vue.prototype.$getRsaCode = function(str){ // 注册方法
  let encryptStr = new JSEncrypt();
  let pubKey = `rqerewrrrweqrwqewrwqrerwqrsfsafafsafsafqrewqrwqrqwreqer`; //后台给的公钥
  encryptStr.setPublicKey(pubKey); // 设置 加密公钥
  //str是需要加密的密码，rsa本身已经base64转码一次。因为密码是number类型，所以需要toString
  let  newData = encryptStr.encrypt(str.toString());  // 进行加密
  return newData;
}

三、使用加密方法

methods: {
    getPass() {
      let rasUserName = this.$getRsaCode(this.userName); // ras加密用户名
      let rasPw = this.$getRsaCode(this.password); // ras加密密码
      login({userName:rasUserName,password:rasPw}).then(res => {}).catch(err =>{});// 请求
    },
}