前端接口加密(一)RSA加密,AES解密

加密方式:AES加密,RSA加密

加密方案一:使用RSA加密向后端传输数据,再使用AES对后端的数据进行解密进行非对称加密

加密方案二:前端使用RSA验签,成功之后再使用AES进行参数的加密和解密的对称加密,

加密过程中常见的问题

方案一:

1.分别在src/utils/下建立AES,RSA相关的js文件夹(建立在公共文件中即可,方便取用)

相关依赖:

npm i encryptlong -S              
npm install crypto-js --save-dev  

1.1 AES文件内容:

import CryptoJS from 'crypto-js'

const publicKey='shdakjhkahd'//此处公钥为后端给的
const privateKey='sdjhskh'//此处公钥为后端给的
 //加密
export default{
//AES加密
  encryptAes (data) {
    const aesKey = publicKey;
    if (aesKey && data) {
      const key = CryptoJS.enc.Utf8.parse(aesKey);
      let result =CryptoJS.AES.encrypt(data, key, {
                mode : CryptoJS.mode.ECB,
                padding : CryptoJS.pad.Pkcs7
              }).toString()
      return result
    }else{
      return data
    }
  },
//AES解密
  decryptAes(data){
    const aesKey = privateKey;
    if (aesKey && data) {
      const key = CryptoJS.enc.Utf8.parse(aesKey);
      const decrypt = CryptoJS.AES.decrypt(data, key, {
        // iv : CryptoJS.enc.Utf8.parse(aesKey.substr(0, 16)),
        mode : CryptoJS.mode.ECB,
        padding : CryptoJS.pad.Pkcs7
      });
      return decrypt.toString(CryptoJS.enc.Utf8)
    }
  }
}

1.2 RSA文件内容:

import Encrypt from 'encryptlong'
/* 加密 */
  encrypt(data) {
    const PUBLIC_KEY = publicKey
    var encryptor = new Encrypt()
    encryptor.setPublicKey(PUBLIC_KEY)
    const result = encryptor.encryptLong(data)
    return result
  },
  /* 解密 - PRIVATE_KEY - 验证 */
  decrypt(data) {
    const PRIVATE_KEY = privateKey
    var encryptor = new Encrypt()
    encryptor.setPrivateKey(PRIVATE_KEY)
    var result = encryptor.decryptLong(data)
    return result
  }

2.在请求拦截器里面进行对参数的统一加密,在请求响应器里面进行对返回参数的统一解密

import Rsa from "@/utils/rsa.js"
import Aes from "@/utils/aes.js" 
//请求拦截器
service.interceptors.request.use(
    (config) => {
        let Type = 'application/x-www-form-urlencoded'
        config.headers['Content-Type'] = Type
        config.data = Rsa.encrypt(config.data) //对data形式进行传参的加密
        config.params ? config.params = Aes.encrypt(config.params) : '' //对params形式传参数的加密
        return config;
    },
    (error) => {
        //处理请求错误
        return Promise.reject(error);
    }
);

// 请求响应器
service.interceptors.response.use(
    (response) => {
        const res = Aes.decryptAes(response.data) ? JSON.parse(Aes.decryptAes(response.data)) : response.data;//解密
        //如果自定义代码不是200, 则判断为错误
        if (response.status != 200) {
            return Promise.reject(new Error(res.message || "Error"));
        } else {
            return res;
        }
    },
    (error) => {
        removeToken();
        return Promise.reject(error);
    }
);

前端接口加密(一)RSA加密,AES解密_第1张图片

你可能感兴趣的:(前端vue加密,前端,vue.js,算法,javascript,node.js)