vue使用RSA加密解密-jsencrypt.js

最新推荐文章于 2025-02-21 08:59:14 发布

杨仔小菜菜

最新推荐文章于 2025-02-21 08:59:14 发布

阅读量1.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： javascript vue.js 前端

本文链接：https://blog.youkuaiyun.com/ccyolo/article/details/126966148

vue 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在前端使用JSEncrypt库实现数据的加密与解密功能，通过具体实例展示了如何在注册登录等场景中应用这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.安装jsencrypt.js

npm install jsencrypt --dev

2.创建jsencrypt.js文件

// jsencrypt.js 放在utils公用文件夹下
// 以下为 jsencrypt.js内容
import JSEncrypt from 'jsencrypt/bin/jsencrypt.min'

// 密钥对生成 http://web.chacuo.net/netrsakeypair

const publicKey = '' // 生成公钥

const privateKey = '' // 私钥

// 加密
export function encrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPublicKey(publicKey) // 设置公钥
  return encryptor.encrypt(txt) // 对数据进行加密
}

// 解密
export function decrypt(txt) {
  const encryptor = new JSEncrypt()
  encryptor.setPrivateKey(privateKey) // 设置私钥
  return encryptor.decrypt(txt) // 对数据进行解密
}

3.在需要使用加密解密的组件中使用
注册登录以及重置密码页面使用

// 我在页面中只使用了加密 所以只引入了加密的方法 encrypt,解密方法decrypt,可根据自己需求是否引入
import { encrypt } from '@/utils/jsencrypt' // 加密
export default {
	data() {
		return {
			registerForm: { // 点击注册按钮传入后台的参数
		        username: "", // 用户名
		        password: "", // 密码
		        confirmPassword: "", // 确认密码
		        phonenumber:'', // 手机号
		        deptId:'',
		        code: "", // 验证码
		        uuid: ""
		      }
		}
	},
	methods: {
		//注册按钮
		handleRegister() {
			// 走校验 校验手机号 验证码 以及密码是否符合
			this.$refs.registerForm.validate(valid => {
		        if (valid) {
		        	// 加载中
		          this.loading = true;
		          // 密码进行加密 
		          this.registerForm.password = encrypt(this.registerForm.password)
		          // 确认密码 进行加密
		          this.registerForm.confirmPassword = encrypt(this.registerForm.confirmPassword)
		          // 走接口传参
		          register(this.registerForm).then(res => {
		            const username = this.registerForm.username;
		            this.$alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", '系统提示', {
		              dangerouslyUseHTMLString: true,
		              type: 'success'
		            }).then(() => {
		              this.$router.push("/login");
		            }).catch(() => {});
		          }).catch(() => {
		            this.loading = false;
		            if (this.captchaEnabled) {
		              this.getCode();
		            }
		          })
		        }
		      });
		}
	}
}