为什么前端加密

密码或者其他比较重要东西假如使用明文，出现传输中被窃听是很危险的行为，所以就需要前端一些加密协议，对密码、手机号、身份证号或着去其他重要的信息进行保护；
前端的加密方式
前端的加密方式有很多，目前我使用的有md5、crypto-js以及JWT，这篇文章目前只讲md5、crypto-js方式。

MD5加密

安装：cnpm i --save js-md5
在main.js文件中将md5转换成vue原型：

//main中引入
import md5 from 'js-md5';
Vue.prototype.$md5 = md5;

//使用
this.$md5('holle')

crypto-js加密

使用环境： 因为需要显示密码，所以使用该加密方式，返回给后台，进行二次加密，前端只需要进行解密就可以展示加密密码,
前端crypto-js (AES)加解密的实现
安装： cnpm install crypto-js -D
crypto-js使用：

import CryptoJS from "crypto-js";

// 加密
export function pwEncrypt(word, keyStr) {
  keyStr = keyStr ? keyStr : "设计加密解密的信息";
  let key = CryptoJS.enc.Utf8.parse(keyStr);
  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();
}

//解密
export function pwDecrypt(word, keyStr) {
  keyStr = keyStr ? keyStr : "设计加密解密的信息";
  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();
}

欢迎点赞收藏