vue和H5的加解密

最新推荐文章于 2024-07-16 17:04:03 发布

kai.先生

最新推荐文章于 2024-07-16 17:04:03 发布

阅读量704

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/kaieew12345/article/details/125840589

版权

本文介绍了如何在Vue.js项目中使用CryptoJS库进行AES加密和解密，以保护数据在前后端交互过程中的安全性。在请求拦截器中对数据进行全局加密，确保敏感信息不被泄露。同时，对于H5端，也展示了类似的加密处理方法，通过引入aes.min.js库并在jQuery的ajaxSetup中设置加密。

摘要由CSDN通过智能技术生成

vue加解密方式

1.在js文件中写出加密解密的方法

import CryptoJS from 'crypto-js'
import Vue from 'vue'

// 加密
export function encrypt(word, keyStr) {
  keyStr = Vue.cookie.get('AESKey') // 获取key，
  // console.log(keyStr)
  var key = CryptoJS.enc.Utf8.parse(keyStr)
  var srcs = CryptoJS.enc.Utf8.parse(word)
  var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
  return encrypted.toString()
}
// 解密
export function decrypt(word, keyStr) {
  keyStr = Vue.cookie.get('AESKey')
  var key = CryptoJS.enc.Utf8.parse(keyStr)
  var decrypt = CryptoJS.AES.decrypt(word, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 })
  return CryptoJS.enc.Utf8.stringify(decrypt).toString()

}

2.引入加密方式

import { encrypt } from '@/utils/AES.js'

3.在请求拦截器中进行全局加密

config.data = encrypt(JSON.stringify(config.data))

H5加解密方式

1.加密和加密的函数写法是一样的

2.加密解密的包引入到common.js中

document.write('<script src="/js/aes.min.js" type="text/javascript" charset="utf-8"></script>')

3.在拦截器加密

$.ajaxSetup({
  headers: { token: $.cookie('token') },
  beforeSend: function () {
    console.log(arguments[1]);
      arguments[1].data = encrypt(arguments[1].data)
  },
  processData: false,
  complete: function (xhr, a, s) {
    //token过期，
  },
})