vue配置加密_Vue项目中使用AES加密

本文介绍了在Vue项目中如何使用AES加密。首先通过安装crypto-js库,然后在工具文件夹新建encryption.js,定义加密和解密方法。通过示例展示了加密和解密的调用方式,同时也提到了MD5加密的使用场景。
摘要由CSDN通过智能技术生成

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项目中使用md5加密

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

在vue项目中使用md5加密 sirai

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

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

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

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

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

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

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

vue 项目中实用的小技巧

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

如何在VUE项目中添加ESLint

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

在vue项目中, mock数据

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

浅谈 Axios 在 Vue 项目中的使用

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

随机推荐

.NET Core 构建配置文件从 project.json 到 .csproj

从 .NET Core SDK 1.0 Preview 3 build 004056 开始,.NET Core 弃用 project.json,回归 .csproj,主要原因是为了兼容 MSBuild ...

Cassandra1.2文档学习(6)—— 客户端数据请求

参考文档:http://www.datastax.com/documentation/cassandra/1.2/webhelp/index.html#cassandra/architecture/a ...

c++ timer基于win消息队列

能够承载10w个timer通信执行,说关闭就关闭,里面用了一个比較巧妙的线程处理,呵呵10W个timer就10多个线程,请大牛不要笑话,供新手学习之用 #pragma once #include &l ...

Web日志分析

http://www.rising.com.cn/newsletter/news/2013-03-20/13380.html https://www.trustwave.com/Resources/S ...

iOS 跑马灯 之 TXScrollLabelView

前言 前段时间在开发一个广播的功能,网上也自己找了一些库,没有发现非常好用的,于是自己抽时间写了一个,在 Github 上发布一天收获六十多个 star,这里首先感谢大家在微博上的转发,使得 TXSc ...

Postgres中的物化节点之sort节点

顾名思义,物化节点是一类可缓存元组的节点.在执行过程中,很多扩展的物理操作符需要首先获取所有的元组后才能进行操作(例如聚集函数操作.没有索引辅助的排序等),这时要用物化节点将元组缓存起来.下面列出了P ...

文件上传XSS引发的安全问题

文件上传xss,一般都是上传html文件导致存储或者反射xss 一般后缀是html,之前疏忽了,没怎么考虑文件上传xss 如果没有 验证文件内容,却验证了后缀的情况下,使用: htm后缀: 测试代码: ...

为Nexus配置阿里云代理仓库【转】

Nexus默认远程仓库为https://repo1.maven.org/maven2/ 慢死,还常连不上. 可以添加阿里云代理仓库 URL:http://maven.aliyun.com/nexus/ ...

SSH项目需要的所有架包

原地址:https://blog.csdn.net/qq_35816104/article/details/54346182   SSH框架:struts2 hibernate spring 该三大框 ...

Nginx拦截指定国家的IP

Nginx拦截指定国家的IP 一.下载GeoIP数据库 wget http://geolite.maxmind.com/download/geoip/api/c/GeoIP.tar.gz wget h ...

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值