1、在vue中安装crypto-js

      

  备注:千万不要安装错了,中间是 ‘-’连接,不是‘.’

2、在项目的工具文件夹中新建 encryption.js,用于定义加密和解密的方法,方便调用 

import Vue from 'vue'
import CryptoJS from 'crypto-js'
export default {
  //加密
encrypt(word, keyStr){
keyStr = keyStr ? keyStr : 'abcdefgabcdefg12';
let key = CryptoJS.enc.Utf8.parse(keyStr);//Latin1 w8m31+Yy/Nw6thPsMpO5fg==
let srcs = CryptoJS.enc.Utf8.parse(word);
let encrypted = CryptoJS.AES.encrypt(srcs, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
return encrypted.toString();
},
//解密
decrypt(word, keyStr){
keyStr = keyStr ? keyStr : 'abcdefgabcdefg12';
var key = CryptoJS.enc.Utf8.parse(keyStr);//Latin1 w8m31+Yy/Nw6thPsMpO5fg==
var decrypt = CryptoJS.AES.decrypt(word, key, {mode:CryptoJS.mode.ECB,padding: CryptoJS.pad.Pkcs7});
return CryptoJS.enc.Utf8.stringify(decrypt).toString();
}
}

  备注:第一个参数是待加密的字符串,第二个参数是aes加密需要用到的16位字符串的key

      如果需要对一个对象加密,需要先使用JSON.stringify()将对象转为字符串

3、测试:在需要加密的组件中,引用 encryption.js

      

   打印出来:  tqzQi/1VKC9mV8EZjfu/tg== ---- addfe

 

Vue项目中使用AES加密的更多相关文章

  1. 在vue项目中使用md5加密

    MD5:信息-摘要算法,是让大容量信息在用数字签名软件签署私人密匙前被"压缩"成一种保密的格式 一般我们把登录和注册信息的密码进行加密 1.安装模块 cnpm install js ...

  2. 在vue项目中使用md5加密 sirai

    1.安装模块 npm install js-md5 -D 2.在项目中引入模块 import md5 from 'js-md5' 3.把你需要加密的信息进行前期处理 CalcuMD5 = functi ...

  3. 如何在vue项目中使用md5加密

    npm安装: npm install --save js-md5 1.在需要使用的项目文件中引入: import md5 from 'js-md5'; 使用: md5('hello world') / ...

  4. 探讨.NET Core中实现AES加密和解密以及.NET Core为我们提供了什么方便!

    前言 对于数据加密和解密每次我都是从网上拷贝一份,无需有太多了解,由于在.net core中对加密和解密目前全部是统一了接口,只是做具体的实现,由于遇到过问题,所以将打算基本了解下其原理,知其然足矣, ...

  5. vue项目中使用Lodop实现批量打印html页面和pdf文件

    1.Lodop是什么? Lodop(标音:劳道谱,俗称:露肚皮)是专业WEB控件,用它既可裁剪输出页面内容,又可用程序代码直接实现复杂打印.控件功能强大,却简单易用,所有调用如同JavaScript扩 ...

  6. vue 项目中实用的小技巧

    # 在Vue 项目中引入Bootstrap 有时在vue项目中会根据需求引入Bootstrap,而Bootstrap又是依赖于jQuery的,在使用npm按照时,可能会出现一系列的错误 1.安装jQu ...

  7. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  8. 在vue项目中, mock数据

    1. 在根目录下创建 test 目录, 用来存放模拟的 json 数据, 在 test 目录下创建模拟的数据 data.json 文件 2.在build目录下的 dev-server.js的文件作如下 ...

  9. 浅谈 Axios 在 Vue 项目中的使用

    介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...

随机推荐

  1. 怎么通过原生JS改变元素的class属性

    解决方法:document.getElementById('test').className = 'emphasis' Eg: <!doctype html> <html lang= ...

  2. List的remove方法里的坑

    今天遇到一件怪事,用一个ArrayList添加了一个对象,再调用ArrayList的remove方法删除该对象,当然这时对象是数据库里查出来的,但内容绝对是一样,却发现remove失败了.演示一下,这 ...

  3. CVR并发写入测试

    CVR并发写入测试 测试环境: 主机:DELL Optiplex 790 系统:Windows7SP1 64bit CPU:i5-2500 3.3GB 4核 内存:8GB 硬盘:希捷 7200rpm ...

  4. windows注册服务

    Windows服务是运行一些服务程序的较好方式(这些程序专门为各种功能提供服务,无操作界面,运行在后台),其创建方法也很简单,通过系统自带的sc命令即可方便的创建. sc命令创建Windows服务的方 ...

  5. 比特币区块的hash算法

    Block hashing algorithm Bitcoin mining uses the hashcash proof of work function; the hashcash algori ...

  6. 学习UML图和时序图,以及IDEA种查看类之间关系

    1.类之间的关系:(6种) 关系 表示 图示 解释 表明的结构和语义 泛化关系 带空心箭头的直线 A继承自B(B指代非抽象类) 继承结构 实现关系 带空心箭头的虚线 小汽车继承车(B指代抽象类) 继承 ...

  7. cent7虚拟机切换root时出现"ABRT has detected ..."问题

      今早打开虚拟机,在sudo -i的时候,发现出了这个问题: 于是我按照提示,执行abrt-cli list --since 1563382095后,结果如下: 大意就是内核出现了某CPU软死锁的问 ...

  8. [LuoguP2167][SDOI2009]Bill的挑战_容斥原理/状压dp

    Bill的挑战 题目链接:https://www.luogu.org/problem/P2167 数据范围:略. 题解: 因为$k$特别小,想到状压. 状压的方式也非常简单,就是暴力枚举. 但是会不会 ...

  9. Linux安装zookeeper集群

    一.单机部署: ①下载.解压 http://archive.apache.org/dist/zookeeper/ tar -zxf zookeeper-3.4.10.tar.gz -C /usr/lo ...

  10. [转帖]关于USB3.0以及type-C

    忘记来源页面了.. 但是昨天晚上 usb 4.0 发布了 跟雷电C 安全一样的标准 双向40gb 的带宽. 而且 以后只有usb type-C的接口了. 我们办公机器上面的 typeC 同事用 ngf ...