vue项目中加密和解密

Vue项目使用AES做加密

 

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'

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

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

1 2 3 4 5 6 7 8 9 10 11

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');

引用

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

1 2 3 4 5 6 7 8 9 10 11 12 13     14 15 16

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) // 我是待加密的数据