vue项目中加密和解密

Vue项目使用AES做加密3、utils.js文件中的内容/*** 工具类*/import Vue from 'vue'import CryptoJS from 'crypto-js'export default {//加密encrypt(word, keyStr){keyStr = keyStr ? keyStr : 'abcdefgabc...

不忘初心才得始终

8215人浏览 · 2020-03-19 15:17:41

不忘初心才得始终 · 2020-03-19 15:17:41 发布

Vue项目使用AES做加密

aes.js 文件内容如下：

// test under node v6.11.1

const crypto = require("crypto"); // npm install crypto-js

const URLSafeBase64 = require('urlsafe-base64'); // npm install urlsafe-base64

class AESCipher {

/**

* AES 加密请求参数，解密相应参数

* @param {*密钥} key

constructor(key) {

this.key = key;

}

encode_data(data) {

/**

* 加密

var datajson = data;

if (typeof datajson === "object") {

datajson = JSON.stringify(datajson);

}

var cryptkey = crypto.createHash('sha256').update(this.key, 'utf8').digest().slice(0, 16);

var iv = crypto.randomBytes(16); // 生成随机偏移

var encipher = crypto.createCipheriv('aes-128-cbc', cryptkey, iv);

encipher.setAutoPadding(true); // 设置默认自动填充，填充模式PKCS7

var encdata = Buffer.concat([encipher.update(datajson, 'utf8'), encipher.final()]);

var enc = Buffer.concat([iv, encdata]);

return URLSafeBase64.encode(enc).toString('hex');

}

decode_data(enc) {

/**

* 解密

var encdata = URLSafeBase64.decode(enc);

var cryptkey = crypto.createHash('sha256').update(this.key, 'utf8').digest().slice(0, 16);

var iv = encdata.slice(0, 16);

encdata = encdata.slice(16);

var decipher = crypto.createDecipheriv('aes-128-cbc', cryptkey, iv);

decipher.setAutoPadding(true);

var datajson = Buffer.concat([decipher.update(encdata, 'utf8'), decipher.final()]).toString('utf8');

return JSON.parse(datajson);

}

export default AESCipher;

<-------->

axios.js 内容如下：

import axios from 'axios';

import AESCipher from '../config/aes';

const key = 'TEST-KEY=ztcmvr8ko2cibtja4wocr5sqkfcdeceu';

var aes = new AESCipher(key);

// 请求拦截器

// axios.defaults.headers.post['Content-Type']='application/json;charse=UTF-8';

axios.interceptors.request.use(config => {

let origin_data = {

time: Math.floor(new Date().getTime() / 1000),

data: null

};

if (config.method === "post") {

origin_data.data = config.data;

config.data = {

enc_data: aes.encode_data(origin_data)

};

}else if(config.method === "get") {

origin_data.data = config.params;

config.params = {

enc_data: aes.encode_data(origin_data)

};

}

return config;

}, err => {

return Promise.reject(err); //请求错误时，直接结束

});

axios.interceptors.response.use(

response => {

response.data = aes.decode_data(response.data);

return response;

error => {

return Promise.reject(error);

});

export default axios;

3、utils.js文件中的内容

复制代码

/**
 * 工具类
 */
import Vue from 'vue'
import CryptoJS from 'crypto-js'
export default {//加密
  encrypt(word, keyStr){ 
    keyStr = keyStr ? keyStr : 'abcdefgabcdefg12';
    var key  = CryptoJS.enc.Utf8.parse(keyStr);//Latin1 w8m31+Yy/Nw6thPsMpO5fg==
    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 : '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();
  }

}

复制代码

注：1、一定要在该文件中引用vue和crypto-js。2、两个方法中的第一个参数word是待加密或者解密的字符串，第二个参数keyStr是aes加密需要用到的16位字符串的key。3、如果想对一个js对象加密，需要先把该对象转成json字符串。

4、测试：

在需要使用加密解密方法的vue组件中使用import引入utils.js文件即可使用了

jsencrypt.js加密

项目需求中需要对用户登录时的密码进行加密，在网上查询些许文章后，最终与后端协商使用jsencrypt.js。

jsencrypt.js的github地址： https://github.com/travist/js...

使用yarn安装至Vue项目

yarn add jsencrypt --dep

或者使用npm

npm install jsencrypt --dep

引入jsencrypt

import { JSEncrypt } from 'jsencrypt'

可封装为全局混合，便于调用

公钥为后端提供，如前端需要解密数据，则需要后端提供私钥。此处只封装了加密。

methods: {

// 加密

encryptedData(publicKey, data) {

// 新建JSEncrypt对象

let encryptor = new JSEncrypt();

// 设置公钥

encryptor.setPublicKey(publicKey);

// 加密数据

return encryptor.encrypt(data);

}

调用函数加密，此处的公钥是我从后端那获取的，然后加密密码

encryptedPassword = this.encryptedData(publicKey, password);

即完成加密。

更多使用可查阅官方文档 http://travistidwell.com/jsen...

PS：下面看下jsencrypt 配置对密码进行加密(vue)

安装

npm i node-jsencrypt

在script下导入

1 2	`// 引入加密模块,对密码进行处理` `const JSEncrypt = require('jsencrypt');`

引用

一般情况下,后台会给一个获取公钥的接口来进行转换

methods: {

init() {

// 发送请求,获取公钥

getKey().then(res => {

this.gongKey = res.data.data; // 获取到公钥

// 传入所请求回来的公钥,对密码进行处理

// 实例化加密对象

var crypt = new JSEncrypt.JSEncrypt({

default_key_size: 1024

});

crypt.setPublicKey(this.gongKey);

// 拿到加密明文

let passWord = crypt.encrypt(obj.value);

});

}

jscrypto-.min.js 加密/解密

首先引入cdn

<script src="https://cdn.bootcss.com/crypto-js/3.1.9/jscrypto-.min.js"></script>
1
2
在webpack.base.conf.js配置

externals: {
'crypto':'Crypto',
},

在src目录下，建立crypto文件夹，新建index.js文件，写入加密代码

export default {//加密
set(word, keyStr){
keyStr = keyStr ? keyStr : 'abcdefghijklmnop'; //16位的密钥，自己定义，和下面的密钥要相同
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();
},
//解密
get(word, keyStr){
keyStr = keyStr ? keyStr : 'abcdefghijklmnop';
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 Crypto from "@/crypto";
、
、
、
let str = escape(Crypto.set("123456")); //加密我用了escape进行特殊字符转码

let str2 = Crypto.get(unescape(str)); //解密

base64加密

install
cnpm install js-base64 –save-dev

封装
import { Base64 } from 'js-base64'

// 加盐
let salting = 'admin-authority'

// 加密
const encryptString = (name) => {
return Base64.encode(name + salting)
}

// 解密
const decodeString = (name) => {
let decodeName = Base64.decode(name) || ''

if (decodeName && decodeName.split && decodeName.split(salting) && decodeName.split(salting)[0]) {
return decodeName.split(salting)[0]
} else {
return ''
}
}

export { encryptString, decodeString }

挂载
import { encryptString, decodeString } from '@/utils/encrypt'

Vue.prototype.encryptString = encryptString
Vue.prototype.decodeString = decodeString

应用
let str = '我是待加密的数据'
let enc = this.encryptString(str)
console.log(enc) // 5oiR5piv5b6F5Yqg5a+G55qE5pWw5o2uYWRtaW4tYXV0aG9yaXR5
let dec = this.decodeString(enc)
console.log(dec) // 我是待加密的数据

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^