vue RSA + AES + Base64加密

本文介绍了如何在前端实现RSA和AES加密解密。首先讲解了安装相关依赖,如jsencrypt和crypto-js。接着详细阐述了RSA加密解密的实现,包括创建公钥私钥、加密解密函数。然后展示了AES加解密的实现,使用了CryptoJS库,并提供了Base64加密解密的辅助方法。最后提到了在axios中如何使用这些加密方法来保护请求数据的安全。

RSA,RSA2公钥私钥加密解密

AES加解密在线调试工具

安装依赖

// RSA依赖
npm install jsencrypt --save
// AES依赖
npm install cryptojs

RSA加密

创建rsa.js

import JSEncrypt from 'jsencrypt'
/**
 * rsa加密
 * @param {string} str     原文
 * @param {string} keyCode 公钥
 * @returns {string} 加密后的文本
 */
export function getRsaCode(str, keyCode) {
  const encryptStr = new JSEncrypt()
  const pubKey = `-----BEGIN RSA PRIVATE KEY-----${keyCode}-----END RSA PRIVATE KEY-----`
  // 设置 加密公钥
  encryptStr.setPublicKey(keyCode)
  // 进行加密
  const data = encryptStr.encrypt(str.toString())
  return data
}
/**
 * rsa解密
 * @param {string} str     加密的文本
 * @param {string} keyCode 公钥
 * @returns {string} 解密后的文本
 */
export function getRsaDeCode(str, keyCode) {
  var decrypt = new JSEncrypt()
  // ES6 模板字符串 引用 rsa 公钥
  // const pubKeyPrivate = `-----BEGIN RSA PRIVATE KEY-----${keyCode}-----END RSA PRIVATE KEY-----`
  // 解密公钥
  decrypt.setPrivateKey(keyCode)
  // 解密
  var decryptMsg = decrypt.decrypt(str.toString())
  return decryptMsg
}
/**
 * 生成32位16进制随机数
 * @returns {string} 32位字符
 */
export function createHexRandom() {
  var num = ''
  for (let i = 0; i <= 31; i++) {
    var tmp = Math.ceil(Math.random() * 15).toString(16)
    num += tmp
  }
  return num
}

使用rsa

import { getRsaCode, getRsaDeCode } from './mixins/rsa.js'

/**
 * 加密头部
 * @param {headers} headers 头部
 * @param {string}  keyCode 加密码
 * @description 装修加密头部信息
 */
function addEnHeaders(headers, keyCode) {
  let publicKey =
'MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAjVweqeSHRKNACRj9yIXyfIE57J+7D3RtsVKeh4sHy4kKAOB1uweqEAOPGWM+X1dGgxY2oxcDaQDm697dimfguhHonAxMc6rMXOXO0Jb9i8NDsPCV9osHhepPzEeq1zfP9M7Knlzzskrszil3gEPi0815KqEiO+gAuMUdzqwepwzQyjPkB2/OWjoqTWN8NDazyvvfqbhrz/k8shn6W9K2HGbG8I4APm1+g0McumTErMw9WBOCJg4aEYc5p+S5URnAoOmJ0DChUhNxbr/MkW0xXCNLDxrmqPuVPYYx8P8LZwLwexroJC0gAgfhcRWrK/tG+zfUZUCuejs72rteiu+LYWalN4OwIDAQAB'
  headers['Content-Type'] = 'application/encrypted-json;charset=UTF-8'
  headers['X-Encrypted-Key'] = getRsaCode(keyCode, publicKey)
}

公钥从后端接口获取,可以从在线RSA,RSA2公钥私钥加密解密生成测试密钥
在这里插入图片描述

AES算法处理

import cryptoJs from 'crypto-js'

/**
 * 加密
 * @param {*}      word    需要加密数据
 * @param {string} keyCode 加密秘钥
 * @param {string} ivCode  矢量
 *
 * @returns {string} 新数据
 */
export function encrypt(word, keyCode, ivCode) {
  if (!word) {
    return
  }
  // 16位秘钥(128bit),支持128位、192位、256位key
  let key = CryptoJS.enc.Utf8.parse(keyCode || '11111111ffffffff')
  // 16位矢量码
  let iv = CryptoJS.enc.Utf8.parse(ivCode || '11111111ffffffff')
  let encrypted = ''
  if (typeof word == 'string') {
    let srcs = CryptoJS.enc.Utf8.parse(word)
    encrypted = CryptoJS.AES.encrypt(srcs, key, {
      iv: iv,
      mode: CryptoJS.mode.CBC,
      // PKCS5Padding或PKCS7Padding
      padding: CryptoJS.pad.Pkcs7, 
    })
  } else if (typeof word == 'object') {
    // 对象格式的转成json字符串
    let data = JSON.stringify(word)
    let srcs = CryptoJS.enc.Utf8.parse(data)
    encrypted = CryptoJS.AES.encrypt(srcs, key, {
      iv: iv,
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7,
    })
  }
  return encrypted.ciphertext.toString()
}
/**
 * 解密
 * @param {*}      word    数据
 * @param {string} keyCode 加密秘钥码
 * @param {string} ivCode  矢量码
 *
 * @returns {string} 新数据
 */
export function decrypt(word, keyCode, ivCode) {
  if (!word) {
    return
  }
  let key = CryptoJS.enc.Utf8.parse(keyCode || '11111111ffffffff')
  let iv = CryptoJS.enc.Utf8.parse(ivCode || '11111111ffffffff')
  let encryptedHexStr = CryptoJS.enc.Hex.parse(word)
  let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr)
  let decrypt = CryptoJS.AES.decrypt(srcs, key, {
    iv: iv,
    mode: CryptoJS.mode.CBC,
    padding: CryptoJS.pad.Pkcs7,
  })
  let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
  return decryptedStr.toString()
}
```js

## Base64方式
Base64加密
```js
... {
	...
	return CryptoJS.enc.Base64.stringify(encrypted.ciphertext)
}

Base64解密

...(word) {
	let key = CryptoJS.enc.Utf8.parse(keyCode),
    // 通过base64解析密文
    ciphertext = CryptoJS.enc.Base64.parse(word).toString(),
    encryptedHexStr = CryptoJS.enc.Hex.parse(ciphertext),
    srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr),
    cipherParams = {
      iv: CryptoJS.enc.Utf8.parse(ivCode),
      mode: CryptoJS.mode.CBC,
      padding: CryptoJS.pad.Pkcs7, // PKCS5Padding或PKCS7Padding
    },
    decrypt = CryptoJS.AES.decrypt(srcs, key, cipherParams),
    decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
  	return decryptedStr.toString()
}

劫取axios

axios.js

import axios from 'axios'
import aes from './mixins/aes.js'
import { getRsaCode, getRsaDeCode } from './mixins/rsa.js'

...

// http request 拦截器
axios.interceptors.request.use(
	config => {
		// 获取时区GMT+8时间戳
    	let keyCode = getZoneTimestamp(8).toString()

		/**
	     * 1、创建32位十六进制随机数
	     * 2、截取前面19位 + GT8时间戳补全
	     */
	    keyCode = aes.createHexRandom().substring(0, 32 - keyCode.length) + keyCode

		if (config.method == 'get') {
	        // get方式不需要加密
	        config.params = config.params.params
	      } else if (config.method == 'post') {
		        if (加密条件) {
			          // 加密数据
			          config.data = aes.encrypt(
			            config.data.params,
			            keyCode,
			            keyCode.substring(0, 16),
			          )
			          addEnHeaders(headers, keyCode)
		        } else {
		          	config.data = config.data.params
		          	headers['Content-Type'] = 'application/json'
		        }
	      }
	},
	error => {
		return Promise.reject(err)
	},
	error => {
    	reqArray = []
    	Indicator.close()
    	return Promise.reject(error)
  },
)

// http response 拦截器
axios.interceptors.response.use(
	response => {
	
	}
)
...

话说代码不能写太全,,,留给别人更多点的思考机会。这样才能更快的成长!!!

<think>好的,我现在需要帮助用户在Vue3和TypeScript项目中实现账号密码的加密与解密功能。首先,我得回顾一下用户提供的引用内容,虽然其中提到的是RSA加密,但用户的问题可能更广泛,需要明确他们具体需要的加密方法。 用户可能希望使用非对称加密,比如RSA,或者对称加密,比如AES。根据常见的安全实践,密码传输通常使用非对称加密,前端加密后传输,后端用私钥解密。而存储密码的话,应该使用哈希加盐,但用户提到的是加密解密,所以可能需要传输过程中的加密。接下来,我需要考虑如何在Vue3中集成加密库。用户提到的JSEncrypt适用于RSA,而如果是AES的话,可能需要crypto-js或者node内置的crypto模块。不过在前端,使用crypto-js更常见,因为浏览器环境限制。 需要确保用户了解加密的最佳实践,比如HTTPS的必要性,前端加密只是额外防线,不能替代传输层安全。同时,要处理长文本的分段加密,尤其是RSA对长度限制的问题。 然后,步骤应该包括环境准备、库安装、工具类编写、组件使用示例。对于TypeScript,需要类型定义,所以安装@types/jsencrypt是必要的。如果用户选择AES,可能需要安装crypto-js和它的类型声明。 代码部分需要展示如何创建加密工具类,封装加密解密方法,在组件中调用。同时,要处理公钥和私钥的管理,建议从后端动态获取,避免硬编码在前端。 还要考虑错误处理,比如加密失败时的提示,以及异步操作的可能。如果使用环境变量存储公钥,需要配置Vue的环境变量文件。 最后,生成相关问题,帮助用户深入理解,比如加密原理、优化方法、密钥管理、与HTTPS的关系等。需要验证步骤是否正确,比如安装依赖、工具类的导出、组件中的使用是否正确。同时提醒用户不要在前端暴露私钥,确保后端负责解密,符合安全规范。</think>以下是在Vue3+TypeScript项目中实现账号密码加密解密的完整解决方案: ### 一、加密方案选择 推荐使用RSA非对称加密,公钥加密/私钥解密模式更安全[^1]。前端通过JSEncrypt库实现,密钥对由后端生成提供公钥。 ```bash # 安装依赖 npm install jsencrypt --save npm install @types/jsencrypt --save-dev ``` ### 二、核心加密工具类 ```typescript // src/utils/crypto.ts import JSEncrypt from 'jsencrypt' class CryptoHandler { private encryptor: JSEncrypt private publicKey = import.meta.env.VITE_RSA_PUBLIC_KEY // 从环境变量获取 constructor() { this.encryptor = new JSEncrypt() this.encryptor.setPublicKey(this.publicKey) } // RSA加密方法 encrypt(data: string): string | false { try { return this.encryptor.encrypt(data) } catch (error) { console.error('加密失败:', error) return false } } // 密码加密专用方法 encryptPassword(password: string): string { const encrypted = this.encrypt(password) if (!encrypted) throw new Error('密码加密失败') return encrypted } } export const cryptoHandler = new CryptoHandler() ``` ### 三、登录组件应用 ```vue <!-- src/components/LoginForm.vue --> <script setup lang="ts"> import { ref } from 'vue' import { cryptoHandler } from '@/utils/crypto' const username = ref('') const password = ref('') const handleLogin = async () => { try { const encryptedData = { username: username.value, password: cryptoHandler.encryptPassword(password.value) } // 发送加密后的数据到后端 const response = await fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(encryptedData) }) // 处理响应... } catch (error) { console.error('登录失败:', error) } } </script> ``` ### 四、环境变量配置 ```env # .env.development VITE_RSA_PUBLIC_KEY=-----BEGIN PUBLIC KEY----- MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC0vWpH... -----END PUBLIC KEY----- ``` ### 五、安全实践建议 1. 公钥应通过HTTPS通道动态获取 2. 加密前对数据进行Base64编码 3. 结合时间戳防止重放攻击 4. 定期更换密钥对(建议每周) 5. 敏感操作需二次验证
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值