vue使用AES.js的步骤详解

 更新时间:2021年10月09日 14:13:51   作者:辰俊分享客  
AES对数据传输加密、解密处理---AES.js,下面分步骤给大家介绍vue使用AES.js的示例代码,感兴趣的朋友跟随小编一起看看吧

AES加密的使用

对数据传输加密、解密处理---AES.js

第一步:

在vue中安装crypto-js依赖

npm install crypto-js --save-dev

第二步:

在static目录下新建一个AES.js文件,例如:

第三步:

在AES.js中填写如下代码

import CryptoJS from "crypto-js";
// npm install crypto-js --save-dev
//随机生成指定数量的32进制key
export default {
  generatekey(num) {
    let library =
      "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    let key = "";
    for (var i = 0; i < num; i++) {
      let randomPoz = Math.floor(Math.random() * library.length);
      key += library.substring(randomPoz, randomPoz + 1);
    }
    return key;
  },
  //加密
  encrypt(word, keyStr) {
    keyStr = keyStr ? keyStr : "CXMGNcYwTrtsadQmV935ONNXMUycpG1g"; //判断是否存在ksy,不存在就用定义好的key
    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();
  },
  //解密
  decrypt(word, keyStr) {
    keyStr = keyStr ? keyStr : "CXMGNcYwTrtsadQmV935ONNXMUycpG1g";
    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();
  }
};

第四步:

在需要使用加密的地方引入

import AES from "@/common/AES.js";

第五步:

调用

//如果是对象/数组的话,需要先JSON.stringify转换成字符串
//调用加密方法
var encrypts = AES.encrypt(JSON.stringify(cars),keys);
//调用解密方法
var dess = JSON.parse(AES.decrypt(encrypts,keys));
console.log(encrypts)
console.log(encrypts.length)
console.log(dess)

到此这篇关于vue使用AES.js的步骤详解的文章就介绍到这了,更多相关vue使用AES.js内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 一文总结Vue和React的异同

    一文总结Vue和React的异同

    这篇文章主要介绍了Vue和React的相同点不不同点,文中对比介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
    2023-05-05
  • vue 无法覆盖vant的UI组件的样式问题

    vue 无法覆盖vant的UI组件的样式问题

    这篇文章主要介绍了vue 无法覆盖vant的UI组件的样式问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue项目实现中英文切换的详细步骤

    vue项目实现中英文切换的详细步骤

    这篇文章主要给大家介绍了关于vue项目实现中英文切换的详细步骤,项目中经常有中英文切换的功能,接下来就简单实现以下这个功能,文中通过代码介绍的非常详细,需要的朋友可以参考
    2023-11-11
  • vuex Module将 store 分割成模块的操作

    vuex Module将 store 分割成模块的操作

    这篇文章主要介绍了vuex Module将 store 分割成模块,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-12-12
  • 基于VUE实现简单的学生信息管理系统

    基于VUE实现简单的学生信息管理系统

    这篇文章主要介绍了VUE实现一个简单的学生信息管理系统,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • html-webpack-plugin修改页面的title的方法

    html-webpack-plugin修改页面的title的方法

    这篇文章主要介绍了html-webpack-plugin修改页面的title的方法 ,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • Vue项目组件化工程开发实践方案

    Vue项目组件化工程开发实践方案

    这篇文章主要介绍了Vue项目组件化工程开发实践方案,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-01-01
  • vue router 配置路由的方法

    vue router 配置路由的方法

    这篇文章主要介绍了vue router 配置路由的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-07-07
  • 在vue+element-plus中无法同时使用v-for和v-if的问题及解决方法

    在vue+element-plus中无法同时使用v-for和v-if的问题及解决方法

    由于路由中存在不需要遍历的数据所以像用v-if来过滤,但是报错,百度说vue不能同时使用v-if和v-for,今天小编给大家分享解决方式,感兴趣的朋友跟随小编一起看看吧
    2023-07-07
  • 如何理解Vue简单状态管理之store模式

    如何理解Vue简单状态管理之store模式

    状态管理也就是数据状态管理,vue应用程序的各组件之间经常需要进行通信,除了v-on、EventBus等通信方式外,可以采用数据共享的方式进行通信。这种简单的数据共享模式就是store模式。
    2021-05-05

最新评论