vue项目中加密和解密

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'

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

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

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