前端加密步驟

1. 安裝crypto-js插件

npm install crypto-js

2. 新建src/utils/aes.js文件

import CryptoJS from 'crypto-js'
export default {
  //加密
  encrypt(word, keyStr){ 
    keyStr = keyStr ? keyStr : 'zaqxswcde123vfr4';
    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();
  },
  //解密
  decrypt(word, keyStr){  
    keyStr = keyStr ? keyStr : 'zaqxswcde123vfr4';
    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();
  }

}

溫馨提示：

• encrypt(word, keyStr) 加密方法
• decrypt(word, keyStr) 解密方法
• 其中keyStr為解密使用的字符串。

3. 掛載方法到Vue實例上

import $aes from '../src/utils/aes'
Vue.prototype.$aes = $aes

4. 使用指導

• 加密 this.$aes.encrypt(str)
• 解密 this.$aes.decrypt(str)

5. 使用場景

• 前端緩存信息的加密保護；
• 頁面鏈接參數的解密保護；