前端RSA加密传输

前端封装使用RSA加密传输 非常简单

1.安装jsencrypt

npm install jsencrypt

2.在utils文件夹下创建rsa.js文件 内容如下

1. 首先引入 import JSEncrypt from 'jsencrypt'
2. 创建使用函数 接收需要加密的值
3. 找后端要配置的公钥
4. 创建rsa加密方法进行加密 整体代码如下

import JSEncrypt from 'jsencrypt'

/**
 *RSA加解密处理
 * value 为需要加密的值
 * publicKey 为后端提供的公钥  后续如果不会变化的话直接在前端定义死就好了 省去再去请求公钥的步骤 何乐而不为呢？
 * 如果公钥后续会变化更新 那就需要在加密事件之前，使用接口向后端发起请求拿到公钥就好了 这样就能保证每次
 * 拿到的公钥都是最新的 
 */

// 使用私钥加密
export const rsaEncryption = value => {
  const publicKey =
    'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDRbz0K786AlI4uJPH7rFu5B+1GF4J/pZWqA+eQ8k/v23yLMIQMQOZpvi4w0w8ZOk5nkAR7kNzlwq+Jxr/iFn4S3HJxbODB0pocpoE15Op2l+OMJkYtJ+C6wg+uUsECvWfWdIQ/Wv4hNs/pVI3PpO2umdrZzWNlP5Qy2w9YUZaoYwIDAQAB'
  const rsa = new JSEncrypt()
  rsa.setPublicKey(publicKey)
  const encryptedValue = rsa.encrypt(value)
  return encryptedValue //返回加密好的值
}

3使用

1. 在需要使用的.vue页面 引入刚才的rsa.js中的方法
2. 调用rsaEncryption这个方法 参数为需要加密的值 一切就OK了 如下演示

    1. 引入 import {rsaEncryption} from '@/utils/rsa'
    2. 
       let password = 'admin123456'
       rsaEncryption(password)

注：以上只是最简单的进行了加密方法的复用 还谈不上封装

1. 可根据自己项目的需求进行加密处理，比如需要多个或者以数组的形式进行值加密，可以在rsa.js文件中修改加密风格，比如循环加密  根据项目自己定义